From 382537f86a0a144d128728dc069ed9293cfbca08 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 09:42:53 -0400 Subject: [PATCH] Improve formatting of config, and add links and class names --- defaultConfig.js | 205 ++++++++++++++++++++++++++++------------------- 1 file changed, 122 insertions(+), 83 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index 6d1b1c9da..e1a304c0b 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -14,9 +14,9 @@ View the full documentation at https://tailwindcss.com. /* -|-------------------------------------------------------------------------- +|------------------------------------------------------------------------------- | The default config -|-------------------------------------------------------------------------- +|------------------------------------------------------------------------------- | | This variable contains the default Tailwind config. You don't have to | use it, but it can sometimes be helpful to have available. For @@ -29,9 +29,9 @@ var defaultConfig = require('tailwindcss').defaultConfig /* -|-------------------------------------------------------------------------- -| Colors -|-------------------------------------------------------------------------- +|------------------------------------------------------------------------------- +| Colors https://tailwindcss.com/docs/color-palette +|------------------------------------------------------------------------------- | | Here you can specify the colors used in your project. As you'll see | below these colors are applied to the text, background and border @@ -116,13 +116,12 @@ var colors = { 'pink-lighter': '#fdf2f5', } - module.exports = { /* - |-------------------------------------------------------------------------- - | Colors - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Colors https://tailwindcss.com/docs/color-palette + |----------------------------------------------------------------------------- | | The color palette defined above is also assigned to the "colors" key of | your Tailwind config. This makes it easy to access them in your CSS @@ -136,9 +135,9 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Screens - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Screens https://tailwindcss.com/docs/responsive + |----------------------------------------------------------------------------- | | Screens in Tailwind are essentially CSS media queries. They define the | responsive breakpoints for your project. By default Tailwind takes a @@ -147,8 +146,8 @@ module.exports = { | want, naming them in whatever way you'd prefer for your project. | | Tailwind also allows for more complex screen definitions, which can be - | useful in certain situations. Be sure to read the full responsive - | documentation at https://tailwindcss.com/docs/responsive. + | useful in certain situations. Be sure to see the full responsive + | documentation for a complete list of options. | */ @@ -161,9 +160,9 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Fonts - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Fonts https://tailwindcss.com/docs/fonts + |----------------------------------------------------------------------------- | | Here is where you define your project's font stack, or font families. | Keep in mind that Tailwind doesn't actually load any fonts for you. @@ -174,6 +173,8 @@ module.exports = { | any device or OS you're using, since it just uses the default fonts | provided by the platform. | + | Class name: .font-{name} + | */ fonts: { @@ -184,9 +185,9 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Text sizes - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Text sizes https://tailwindcss.com/docs/text-sizes + |----------------------------------------------------------------------------- | | Here is where you define your text sizes. These will be available as | .text-{size} utilities. Name these in whatever way makes the most @@ -198,6 +199,8 @@ module.exports = { | then based on. That said, you are free to use whatever units you | prefer, be it rems, ems, pixels or other. | + | Class name: .text-{size} + | */ textSizes: { @@ -213,9 +216,9 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Font weights https://tailwindcss.com/docs/font-weights - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Font weights https://tailwindcss.com/docs/font-weights + |----------------------------------------------------------------------------- | | Here is where you define your font weights. These will be available as | .font-{weight} utilities. We've provided a list of common font weight @@ -223,6 +226,8 @@ module.exports = { | It's unlikely that your project will require all of these, so we | recommend removing those you don't need. | + | Class name: .font-{weight} + | */ fontWeights: { @@ -239,9 +244,9 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Leading (line height) https://tailwindcss.com/docs/text-leading - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Leading (line height) https://tailwindcss.com/docs/text-leading + |----------------------------------------------------------------------------- | | Here is where you define your line height values, or as we call them | in Tailwind, leadings. @@ -259,9 +264,9 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Tracking (letter spacing) https://tailwindcss.com/docs/text-tracking - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Tracking (letter spacing) https://tailwindcss.com/docs/text-tracking + |----------------------------------------------------------------------------- | | Here is where you define your letter spacing values, or as we call them | in Tailwind, tracking. @@ -278,36 +283,42 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Text colors - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Text colors https://tailwindcss.com/docs/text-colors + |----------------------------------------------------------------------------- | | Add... | + | Class name: .text-{color} + | */ textColors: colors, /* - |-------------------------------------------------------------------------- - | Background colors - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Background colors https://tailwindcss.com/docs/background-colors + |----------------------------------------------------------------------------- | | Add... | + | Class name: .bg-{color} + | */ backgroundColors: colors, /* - |-------------------------------------------------------------------------- - | Border widths - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Border widths https://tailwindcss.com/docs/border-widths + |----------------------------------------------------------------------------- | | Add... | + | Class name: .border-{width} + | */ borderWidths: { @@ -320,24 +331,28 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Border colors - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Border colors https://tailwindcss.com/docs/border-colors + |----------------------------------------------------------------------------- | | Add... | + | Class name: .border-{color} + | */ borderColors: Object.assign({ default: colors['slate-lighter'] }, colors) /* - |-------------------------------------------------------------------------- - | Radiuses - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Border radius https://tailwindcss.com/docs/border-radius + |----------------------------------------------------------------------------- | | Add... | + | Class name: .rounded-{size} + | */ borderRadius: { @@ -349,12 +364,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Width - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Width https://tailwindcss.com/docs/width + |----------------------------------------------------------------------------- | | Add... | + | Class name: .w-{size} + | */ width: { @@ -390,12 +407,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Height - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Height https://tailwindcss.com/docs/height + |----------------------------------------------------------------------------- | | Add... | + | Class name: .h-{size} + | */ height: { @@ -420,12 +439,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Minimum width - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Minimum width https://tailwindcss.com/docs/min-width + |----------------------------------------------------------------------------- | | Add... | + | Class name: .min-w-{size} + | */ minWidth: { @@ -435,12 +456,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Minimum height - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Minimum height https://tailwindcss.com/docs/min-height + |----------------------------------------------------------------------------- | | Add... | + | Class name: .min-h-{size} + | */ minHeight: { @@ -451,12 +474,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Maximum width - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Maximum width https://tailwindcss.com/docs/max-width + |----------------------------------------------------------------------------- | | Add... | + | Class name: .max-w-{size} + | */ maxWidth: { @@ -474,12 +499,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Maximum height - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Maximum height https://tailwindcss.com/docs/max-height + |----------------------------------------------------------------------------- | | Add... | + | Class name: .max-h-{size} + | */ maxHeight: { @@ -489,12 +516,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Padding - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Padding https://tailwindcss.com/docs/padding + |----------------------------------------------------------------------------- | | Add... | + | Class name: .p-{size} + | */ padding: { @@ -510,12 +539,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Margin - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Margin https://tailwindcss.com/docs/margin + |----------------------------------------------------------------------------- | | Add... | + | Class name: .m-{size} + | */ margin: { @@ -531,12 +562,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Negative margin - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Negative margin https://tailwindcss.com/docs/negative-margin + |----------------------------------------------------------------------------- | | Add... | + | Class name: .-m-{size} + | */ negativeMargin: { @@ -552,12 +585,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Shadows - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Shadows https://tailwindcss.com/docs/shadows + |----------------------------------------------------------------------------- | | Add... | + | Class name: .shadow-{size} + | */ shadows: { @@ -570,12 +605,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Z-index - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Z-index https://tailwindcss.com/docs/z-index + |----------------------------------------------------------------------------- | | Add... | + | Class name: .z-{name} + | */ zIndex: { @@ -590,12 +627,14 @@ module.exports = { /* - |-------------------------------------------------------------------------- - | Opacity - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- + | Opacity https://tailwindcss.com/docs/opacity + |----------------------------------------------------------------------------- | | Add... | + | Class name: .opacity-{name} + | */ opacity: { @@ -608,13 +647,13 @@ module.exports = { /* - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- | Packages - |-------------------------------------------------------------------------- + |----------------------------------------------------------------------------- | | Here is where you can define the configuration for any Tailwind packages | you're using. These can be utility packs, component bundles, or even - | complete themes. You'll want to reference the package documentation + | complete themes. You'll want to reference each package's documentation | for a list of settings available for it. | */