From 5e19fb5f623000c5ae915aa81c5f579cb81c2ee5 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Tue, 24 Oct 2017 23:11:07 -0400 Subject: [PATCH 01/17] Add documentation to config --- defaultConfig.js | 370 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 362 insertions(+), 8 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index 3c3b3063f..963555df5 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -1,3 +1,49 @@ +/* + +Tailwind - The Utility-First CSS Framework + +A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), +David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). + +Welcome to the Tailwind config file. This is where you can customize +Tailwind specifically for your project. Don't be intimidated by the +length of this file. It's really just a big JavaScript object and +we've done our very best to explain each section. + +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 +| example, you may choose to merge your custom values with some +| of the Tailwind defaults. +| +*/ + +var defaultConfig = require('tailwindcss').defaultConfig + + +/* +|-------------------------------------------------------------------------- +| Colors +|-------------------------------------------------------------------------- +| +| 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 +| utilities. +| +| We've provided a bunch of colors to get you started, but please modify +| them for your project. Also, how you name your colors is entirely up +| to you. You can use color names (as we've done below), or follow a +| numeric scale (like 100, 200, 300), or something else entirely. +| +*/ + var colors = { 'black': '#000000', 'white': '#ffffff', @@ -70,20 +116,93 @@ var colors = { 'pink-lighter': '#fdf2f5', } + module.exports = { + + + /* + |-------------------------------------------------------------------------- + | Colors + |-------------------------------------------------------------------------- + | + | The color palette defined above is also assigned to the "colors" key of + | your Tailwind config. This makes it easy to access them your CSS using + | Tailwind's config helper. For example: + | + | .error { color: config('colors.red') } + | + */ + colors: colors, + + + /* + |-------------------------------------------------------------------------- + | Screens + |-------------------------------------------------------------------------- + | + | Screens in Tailwind are essentially CSS media queries. They define the + | responsive breakpoints for your project. By default Tailwind takes a + | "mobile first" approach, where each screen size represents a minimum + | viewport width. + | + | 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. + | + */ + screens: { sm: '576px', md: '768px', lg: '992px', xl: '1200px', }, + + text: { + + + /* + |-------------------------------------------------------------------------- + | 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. + | If you're using custom fonts you'll need to import them prior to + | defining them here. + | + | By default we provide a native font stack that works remarkably well on + | any device or OS you're using, since it just uses the default fonts + | provided by the platform. + | + */ + fonts: { 'sans': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', 'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif', 'mono': '"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', }, + + + /* + |-------------------------------------------------------------------------- + | 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 + | sense to you. We use size names by default, but you're welcome to + | use a numeric scale or even something else entirely. + | + | By default Tailwind uses the "rem" unit type for most measurements. + | This allows you to set a root font size which all other sizes are + | then based on. That said, you are free to use whatever unit + | types you prefer, be it rems, ems, pixels or other. + | + */ + sizes: { 'xs': '.75rem', // 12px 'sm': '.875rem', // 14px @@ -94,6 +213,21 @@ module.exports = { '3xl': '2.375rem', // 38px '4xl': '2.875rem', // 46px }, + + + /* + |-------------------------------------------------------------------------- + | 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 + | names with their respective numeric scale values to get you started. + | It's unlikely that your project will require all of these, so we + | recommend removing those you don't. + | + */ + weights: { 'hairline': 100, 'thin': 200, @@ -105,23 +239,82 @@ module.exports = { 'extrabold': 800, 'black': 900, }, + + + /* + |-------------------------------------------------------------------------- + | Text leading (line height) + |-------------------------------------------------------------------------- + | + | Add... + | + */ + leading: { 'none': 1, 'tight': 1.25, 'normal': 1.5, 'loose': 2, }, + + + /* + |-------------------------------------------------------------------------- + | Text tracking (spacing) + |-------------------------------------------------------------------------- + | + | Add... + | + */ + tracking: { 'tight': '-0.05em', 'normal': '0', 'wide': '0.05em', }, + + + /* + |-------------------------------------------------------------------------- + | Text colors + |-------------------------------------------------------------------------- + | + | Add... + | + */ + colors: colors, + }, + backgrounds: { + + + /* + |-------------------------------------------------------------------------- + | Background colors + |-------------------------------------------------------------------------- + | + | Add... + | + */ + colors: colors, + }, + borders: { + + + /* + |-------------------------------------------------------------------------- + | Border widths + |-------------------------------------------------------------------------- + | + | Add... + | + */ + widths: { default: '1px', '0': '0', @@ -129,15 +322,51 @@ module.exports = { '4': '4px', '8': '8px', }, + + + /* + |-------------------------------------------------------------------------- + | Border colors + |-------------------------------------------------------------------------- + | + | Add... + | + */ + colors: Object.assign({ default: colors['slate-lighter'] }, colors) + }, + + + /* + |-------------------------------------------------------------------------- + | Radiuses + |-------------------------------------------------------------------------- + | + | Add... + | + */ + radiuses: { default: '.25rem', sm: '.125rem', lg: '.5rem', pill: '9999px', }, + + sizing: { + + + /* + |-------------------------------------------------------------------------- + | Width + |-------------------------------------------------------------------------- + | + | Add... + | + */ + width: { 'auto': 'auto', 'px': '1px', @@ -168,6 +397,17 @@ module.exports = { 'full': '100%', 'screen': '100vw' }, + + + /* + |-------------------------------------------------------------------------- + | Height + |-------------------------------------------------------------------------- + | + | Add... + | + */ + height: { 'auto': 'auto', 'px': '1px', @@ -187,19 +427,48 @@ module.exports = { 'full': '100%', 'screen': '100vh' }, + + + /* + |-------------------------------------------------------------------------- + | Minimum width + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + minWidth: { + '0': '0', + 'full': '100%', + }, + + + /* + |-------------------------------------------------------------------------- + | Minimum height + |-------------------------------------------------------------------------- + | + | Add... + | + */ + minHeight: { '0': '0', 'full': '100%', 'screen': '100vh' }, - maxHeight: { - 'full': '100%', - 'screen': '100vh' - }, - minWidth: { - '0': '0', - 'full': '100%', - }, + + + /* + |-------------------------------------------------------------------------- + | Maximum width + |-------------------------------------------------------------------------- + | + | Add... + | + */ + maxWidth: { 'xs': '20rem', 'sm': '30rem', @@ -212,8 +481,36 @@ module.exports = { '5xl': '100rem', 'full': '100%', }, + + + /* + |-------------------------------------------------------------------------- + | Maximum height + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + maxHeight: { + 'full': '100%', + 'screen': '100vh' + }, + }, + spacing: { + + + /* + |-------------------------------------------------------------------------- + | Padding + |-------------------------------------------------------------------------- + | + | Add... + | + */ + padding: { 'px': '1px', '0': '0', @@ -224,6 +521,17 @@ module.exports = { '6': '1.5rem', '8': '2rem', }, + + + /* + |-------------------------------------------------------------------------- + | Margin + |-------------------------------------------------------------------------- + | + | Add... + | + */ + margin: { 'px': '1px', '0': '0', @@ -234,6 +542,17 @@ module.exports = { '6': '1.5rem', '8': '2rem', }, + + + /* + |-------------------------------------------------------------------------- + | Negative margin + |-------------------------------------------------------------------------- + | + | Add... + | + */ + negativeMargin: { 'px': '1px', '0': '0', @@ -244,7 +563,19 @@ module.exports = { '6': '1.5rem', '8': '2rem', }, + }, + + + /* + |-------------------------------------------------------------------------- + | Shadows + |-------------------------------------------------------------------------- + | + | Add... + | + */ + shadows: { default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)', 'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)', @@ -252,6 +583,17 @@ module.exports = { 'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)', 'none': 'none', }, + + + /* + |-------------------------------------------------------------------------- + | Z-index + |-------------------------------------------------------------------------- + | + | Add... + | + */ + zIndex: { '0': 0, '10': 10, @@ -261,6 +603,17 @@ module.exports = { '50': 50, 'auto': 'auto', }, + + + /* + |-------------------------------------------------------------------------- + | Opacity + |-------------------------------------------------------------------------- + | + | Add... + | + */ + opacity: { '0': '0', '25': '.25', @@ -268,4 +621,5 @@ module.exports = { '75': '.75', '100': '1', } + } From 53d1bc78f56f9c840701bbceb67070d83828ad68 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 07:31:38 -0400 Subject: [PATCH 02/17] Add leading docs to config --- defaultConfig.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index 963555df5..430dcc975 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -20,8 +20,8 @@ View the full documentation at https://tailwindcss.com. | | This variable contains the default Tailwind config. You don't have to | use it, but it can sometimes be helpful to have available. For -| example, you may choose to merge your custom values with some -| of the Tailwind defaults. +| example, you may choose to merge your custom configuration +| values with some of the Tailwind defaults. | */ @@ -246,7 +246,9 @@ module.exports = { | Text leading (line height) |-------------------------------------------------------------------------- | - | Add... + | Here is where you define your line height values, or as we call them + | in Tailwind, leadings. These will be available as .leading-{size} + | utilities. | */ From b1bd134d1e115cd6652b89c3142a25aa91da334a Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 07:32:36 -0400 Subject: [PATCH 03/17] Add text tracking docs to config --- defaultConfig.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/defaultConfig.js b/defaultConfig.js index 430dcc975..ddb1d0155 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -265,7 +265,9 @@ module.exports = { | Text tracking (spacing) |-------------------------------------------------------------------------- | - | Add... + | Here is where you define your text spacing values, or as we call them + | in Tailwind, tracking. These will be available as .tracking-{size} + | utilities. | */ From cdffce9044492ca3b3248b1e0859da5b02212194 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 07:48:22 -0400 Subject: [PATCH 04/17] Remove "SFMono-Regular" from default mono font stack --- defaultConfig.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index ddb1d0155..bfa30fa36 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -126,8 +126,8 @@ module.exports = { |-------------------------------------------------------------------------- | | The color palette defined above is also assigned to the "colors" key of - | your Tailwind config. This makes it easy to access them your CSS using - | Tailwind's config helper. For example: + | your Tailwind config. This makes it easy to access them in your CSS + | using Tailwind's config helper. For example: | | .error { color: config('colors.red') } | @@ -144,7 +144,8 @@ module.exports = { | Screens in Tailwind are essentially CSS media queries. They define the | responsive breakpoints for your project. By default Tailwind takes a | "mobile first" approach, where each screen size represents a minimum - | viewport width. + | viewport width. Feel free to have as few or as many screens as you + | 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 @@ -182,7 +183,7 @@ module.exports = { fonts: { 'sans': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', 'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif', - 'mono': '"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', + 'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', }, From 2a00fab8ab251beb0400d408beed7025d6257050 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 08:52:04 -0400 Subject: [PATCH 05/17] Flatten config (remove nested keys) --- defaultConfig.js | 717 +++++++++++++++++++++++------------------------ 1 file changed, 348 insertions(+), 369 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index bfa30fa36..7d221fbfe 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -119,7 +119,6 @@ var colors = { module.exports = { - /* |-------------------------------------------------------------------------- | Colors @@ -161,188 +160,177 @@ module.exports = { }, - text: { - - - /* - |-------------------------------------------------------------------------- - | 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. - | If you're using custom fonts you'll need to import them prior to - | defining them here. - | - | By default we provide a native font stack that works remarkably well on - | any device or OS you're using, since it just uses the default fonts - | provided by the platform. - | - */ - - fonts: { - 'sans': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', - 'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif', - 'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', - }, - - - /* - |-------------------------------------------------------------------------- - | 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 - | sense to you. We use size names by default, but you're welcome to - | use a numeric scale or even something else entirely. - | - | By default Tailwind uses the "rem" unit type for most measurements. - | This allows you to set a root font size which all other sizes are - | then based on. That said, you are free to use whatever unit - | types you prefer, be it rems, ems, pixels or other. - | - */ - - sizes: { - 'xs': '.75rem', // 12px - 'sm': '.875rem', // 14px - 'base': '1rem', // 16px - 'lg': '1.125rem', // 18px - 'xl': '1.25rem', // 20px - '2xl': '1.75rem', // 28px - '3xl': '2.375rem', // 38px - '4xl': '2.875rem', // 46px - }, - - - /* - |-------------------------------------------------------------------------- - | 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 - | names with their respective numeric scale values to get you started. - | It's unlikely that your project will require all of these, so we - | recommend removing those you don't. - | - */ - - weights: { - 'hairline': 100, - 'thin': 200, - 'light': 300, - 'normal': 400, - 'medium': 500, - 'semibold': 600, - 'bold': 700, - 'extrabold': 800, - 'black': 900, - }, - - - /* - |-------------------------------------------------------------------------- - | Text leading (line height) - |-------------------------------------------------------------------------- - | - | Here is where you define your line height values, or as we call them - | in Tailwind, leadings. These will be available as .leading-{size} - | utilities. - | - */ - - leading: { - 'none': 1, - 'tight': 1.25, - 'normal': 1.5, - 'loose': 2, - }, - - - /* - |-------------------------------------------------------------------------- - | Text tracking (spacing) - |-------------------------------------------------------------------------- - | - | Here is where you define your text spacing values, or as we call them - | in Tailwind, tracking. These will be available as .tracking-{size} - | utilities. - | - */ - - tracking: { - 'tight': '-0.05em', - 'normal': '0', - 'wide': '0.05em', - }, - - - /* - |-------------------------------------------------------------------------- - | Text colors - |-------------------------------------------------------------------------- - | - | Add... - | - */ - - colors: colors, + /* + |-------------------------------------------------------------------------- + | 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. + | If you're using custom fonts you'll need to import them prior to + | defining them here. + | + | By default we provide a native font stack that works remarkably well on + | any device or OS you're using, since it just uses the default fonts + | provided by the platform. + | + */ + fonts: { + 'sans': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', + 'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif', + 'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', }, - backgrounds: { + /* + |-------------------------------------------------------------------------- + | 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 + | sense to you. We use size names by default, but you're welcome to + | use a numeric scale or even something else entirely. + | + | By default Tailwind uses the "rem" unit type for most measurements. + | This allows you to set a root font size which all other sizes are + | then based on. That said, you are free to use whatever units you + | prefer, be it rems, ems, pixels or other. + | + */ - /* - |-------------------------------------------------------------------------- - | Background colors - |-------------------------------------------------------------------------- - | - | Add... - | - */ - - colors: colors, - + textSizes: { + 'xs': '.75rem', // 12px + 'sm': '.875rem', // 14px + 'base': '1rem', // 16px + 'lg': '1.125rem', // 18px + 'xl': '1.25rem', // 20px + '2xl': '1.75rem', // 28px + '3xl': '2.375rem', // 38px + '4xl': '2.875rem', // 46px }, - borders: { + /* + |-------------------------------------------------------------------------- + | 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 + | names with their respective numeric scale values to get you started. + | It's unlikely that your project will require all of these, so we + | recommend removing those you don't need. + | + */ - /* - |-------------------------------------------------------------------------- - | Border widths - |-------------------------------------------------------------------------- - | - | Add... - | - */ - - widths: { - default: '1px', - '0': '0', - '2': '2px', - '4': '4px', - '8': '8px', - }, - - - /* - |-------------------------------------------------------------------------- - | Border colors - |-------------------------------------------------------------------------- - | - | Add... - | - */ - - colors: Object.assign({ default: colors['slate-lighter'] }, colors) - + fontWeights: { + 'hairline': 100, + 'thin': 200, + 'light': 300, + 'normal': 400, + 'medium': 500, + 'semibold': 600, + 'bold': 700, + 'extrabold': 800, + 'black': 900, }, + /* + |-------------------------------------------------------------------------- + | 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. + | + | Class name: .leading-{size} + | + */ + + leading: { + 'none': 1, + 'tight': 1.25, + 'normal': 1.5, + 'loose': 2, + }, + + + /* + |-------------------------------------------------------------------------- + | 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. + | + | Class name: .tracking-{size} + | + */ + + tracking: { + 'tight': '-0.05em', + 'normal': '0', + 'wide': '0.05em', + }, + + + /* + |-------------------------------------------------------------------------- + | Text colors + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + textColors: colors, + + + /* + |-------------------------------------------------------------------------- + | Background colors + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + backgroundColors: colors, + + + /* + |-------------------------------------------------------------------------- + | Border widths + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + borderWidths: { + default: '1px', + '0': '0', + '2': '2px', + '4': '4px', + '8': '8px', + }, + + + /* + |-------------------------------------------------------------------------- + | Border colors + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + borderColors: Object.assign({ default: colors['slate-lighter'] }, colors) + + /* |-------------------------------------------------------------------------- | Radiuses @@ -352,7 +340,7 @@ module.exports = { | */ - radiuses: { + borderRadius: { default: '.25rem', sm: '.125rem', lg: '.5rem', @@ -360,215 +348,206 @@ module.exports = { }, - sizing: { - - - /* - |-------------------------------------------------------------------------- - | Width - |-------------------------------------------------------------------------- - | - | Add... - | - */ - - width: { - 'auto': 'auto', - 'px': '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - '1/2': '50%', - '1/3': '33.33333%', - '2/3': '66.66667%', - '1/4': '25%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.66667%', - '5/6': '83.33333%', - 'full': '100%', - 'screen': '100vw' - }, - - - /* - |-------------------------------------------------------------------------- - | Height - |-------------------------------------------------------------------------- - | - | Add... - | - */ - - height: { - 'auto': 'auto', - 'px': '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - 'full': '100%', - 'screen': '100vh' - }, - - - /* - |-------------------------------------------------------------------------- - | Minimum width - |-------------------------------------------------------------------------- - | - | Add... - | - */ - - minWidth: { - '0': '0', - 'full': '100%', - }, - - - /* - |-------------------------------------------------------------------------- - | Minimum height - |-------------------------------------------------------------------------- - | - | Add... - | - */ - - minHeight: { - '0': '0', - 'full': '100%', - 'screen': '100vh' - }, - - - /* - |-------------------------------------------------------------------------- - | Maximum width - |-------------------------------------------------------------------------- - | - | Add... - | - */ - - maxWidth: { - 'xs': '20rem', - 'sm': '30rem', - 'md': '40rem', - 'lg': '50rem', - 'xl': '60rem', - '2xl': '70rem', - '3xl': '80rem', - '4xl': '90rem', - '5xl': '100rem', - 'full': '100%', - }, - - - /* - |-------------------------------------------------------------------------- - | Maximum height - |-------------------------------------------------------------------------- - | - | Add... - | - */ - - maxHeight: { - 'full': '100%', - 'screen': '100vh' - }, + /* + |-------------------------------------------------------------------------- + | Width + |-------------------------------------------------------------------------- + | + | Add... + | + */ + width: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + '1/2': '50%', + '1/3': '33.33333%', + '2/3': '66.66667%', + '1/4': '25%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.66667%', + '5/6': '83.33333%', + 'full': '100%', + 'screen': '100vw' }, - spacing: { + + /* + |-------------------------------------------------------------------------- + | Height + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + height: { + 'auto': 'auto', + 'px': '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + 'full': '100%', + 'screen': '100vh' + }, - /* - |-------------------------------------------------------------------------- - | Padding - |-------------------------------------------------------------------------- - | - | Add... - | - */ + /* + |-------------------------------------------------------------------------- + | Minimum width + |-------------------------------------------------------------------------- + | + | Add... + | + */ - padding: { - 'px': '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - }, + minWidth: { + '0': '0', + 'full': '100%', + }, - /* - |-------------------------------------------------------------------------- - | Margin - |-------------------------------------------------------------------------- - | - | Add... - | - */ + /* + |-------------------------------------------------------------------------- + | Minimum height + |-------------------------------------------------------------------------- + | + | Add... + | + */ - margin: { - 'px': '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - }, + minHeight: { + '0': '0', + 'full': '100%', + 'screen': '100vh' + }, - /* - |-------------------------------------------------------------------------- - | Negative margin - |-------------------------------------------------------------------------- - | - | Add... - | - */ + /* + |-------------------------------------------------------------------------- + | Maximum width + |-------------------------------------------------------------------------- + | + | Add... + | + */ - negativeMargin: { - 'px': '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - }, + maxWidth: { + 'xs': '20rem', + 'sm': '30rem', + 'md': '40rem', + 'lg': '50rem', + 'xl': '60rem', + '2xl': '70rem', + '3xl': '80rem', + '4xl': '90rem', + '5xl': '100rem', + 'full': '100%', + }, + + /* + |-------------------------------------------------------------------------- + | Maximum height + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + maxHeight: { + 'full': '100%', + 'screen': '100vh' + }, + + + /* + |-------------------------------------------------------------------------- + | Padding + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + padding: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + }, + + + /* + |-------------------------------------------------------------------------- + | Margin + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + margin: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + }, + + + /* + |-------------------------------------------------------------------------- + | Negative margin + |-------------------------------------------------------------------------- + | + | Add... + | + */ + + negativeMargin: { + 'px': '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', }, @@ -625,6 +604,6 @@ module.exports = { '50': '.5', '75': '.75', '100': '1', - } + }, } From 165c001e658a502c496d5f60f5d1ec8e8a43624f Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 08:53:37 -0400 Subject: [PATCH 06/17] Add "packages" key to config --- defaultConfig.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/defaultConfig.js b/defaultConfig.js index 7d221fbfe..6d1b1c9da 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -606,4 +606,20 @@ module.exports = { '100': '1', }, + + /* + |-------------------------------------------------------------------------- + | 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 + | for a list of settings available for it. + | + */ + + packages: { + }, + } From 382537f86a0a144d128728dc069ed9293cfbca08 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 09:42:53 -0400 Subject: [PATCH 07/17] 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. | */ From a08388efc7f3391c4ceaed1607a6fc77218ea6db Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 09:58:11 -0400 Subject: [PATCH 08/17] Add more color docs to config --- defaultConfig.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index e1a304c0b..62afb6026 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -287,7 +287,9 @@ module.exports = { | Text colors https://tailwindcss.com/docs/text-colors |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your text colors. By default these use the color + | palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. | | Class name: .text-{color} | @@ -301,7 +303,9 @@ module.exports = { | Background colors https://tailwindcss.com/docs/background-colors |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your background colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. | | Class name: .bg-{color} | @@ -335,7 +339,13 @@ module.exports = { | Border colors https://tailwindcss.com/docs/border-colors |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your border colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Take note that border colors require a special "default" value set as + | well. This is the color that will be used when you do not specify a + | border color. | | Class name: .border-{color} | From 67f8d1b9cbfc4409b87250d8f9052308642969a4 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 10:02:38 -0400 Subject: [PATCH 09/17] Improve border, padding and margin docs in config --- defaultConfig.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index 62afb6026..84533e9d3 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -321,7 +321,7 @@ module.exports = { | | Add... | - | Class name: .border-{width} + | Class name: .border{-side?}{-width?} | */ @@ -532,7 +532,7 @@ module.exports = { | | Add... | - | Class name: .p-{size} + | Class name: .p{-side?}-{size} | */ @@ -555,7 +555,7 @@ module.exports = { | | Add... | - | Class name: .m-{size} + | Class name: .m{-side?}-{size} | */ @@ -578,7 +578,7 @@ module.exports = { | | Add... | - | Class name: .-m-{size} + | Class name: .-m{-side?}-{size} | */ From 0ad2ffe48335381db6a335a5286affee4f9ac178 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 11:13:19 -0400 Subject: [PATCH 10/17] Quote all editable keys in the config --- defaultConfig.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index 84533e9d3..e49cf2c38 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -152,10 +152,10 @@ module.exports = { */ screens: { - sm: '576px', - md: '768px', - lg: '992px', - xl: '1200px', + 'sm': '576px', + 'md': '768px', + 'lg': '992px', + 'xl': '1200px', }, @@ -367,9 +367,9 @@ module.exports = { borderRadius: { default: '.25rem', - sm: '.125rem', - lg: '.5rem', - pill: '9999px', + 'sm': '.125rem', + 'lg': '.5rem', + 'pill': '9999px', }, @@ -521,7 +521,7 @@ module.exports = { maxHeight: { 'full': '100%', - 'screen': '100vh' + 'screen': '100vh', }, @@ -607,8 +607,8 @@ module.exports = { shadows: { default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)', - 'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)', - 'lg': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)', + 'md': ['0 3px 6px rgba(0,0,0,.12)', '0 3px 6px rgba(0,0,0,.13)'], + 'lg': ['0 10px 20px rgba(0,0,0,.13)', '0 6px 6px rgba(0,0,0,.13)'], 'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)', 'none': 'none', }, From b9cc27854bdbad7d4e029e3e3e3fa69998f60bf0 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 11:14:07 -0400 Subject: [PATCH 11/17] Switch font families to arrays in config --- defaultConfig.js | 35 ++++++++++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index e49cf2c38..2de4c397c 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -178,9 +178,38 @@ module.exports = { */ fonts: { - 'sans': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue', - 'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif', - 'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', + 'sans': [ + '-apple-system', + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + ], + 'serif': [ + 'Constantia', + 'Lucida Bright', + 'Lucidabright', + 'Lucida Serif', + 'Lucida', + 'DejaVu Serif', + 'Bitstream Vera Serif', + 'Liberation Serif', + 'Georgia', + 'serif', + ], + 'mono': [ + 'Menlo', + 'Monaco', + 'Consolas', + 'Liberation Mono', + 'Courier New', + 'monospace', + ] }, From 5ee988e2e0dfb6b2b39b71aee032a9eddf690490 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 16:58:29 -0400 Subject: [PATCH 12/17] Add docs to config for border and sizing utilities --- defaultConfig.js | 46 +++++++++++++++++++++++++++++++++++++--------- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index 2de4c397c..0febb3a4e 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -348,7 +348,9 @@ module.exports = { | Border widths https://tailwindcss.com/docs/border-widths |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your border widths. Take note that border widths + | require a special "default" value set as well. This is the width that + | will be used when you do not specify a border color. | | Class name: .border{-side?}{-width?} | @@ -388,9 +390,11 @@ module.exports = { | Border radius https://tailwindcss.com/docs/border-radius |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your border radius values. Take note that a + | default radius is required. This is the value used when you use the + | non-suffixed version of this utility (.rounded). | - | Class name: .rounded-{size} + | Class name: .rounded-{radius?} | */ @@ -407,7 +411,15 @@ module.exports = { | Width https://tailwindcss.com/docs/width |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your width utility sizes. These can be percentage + | based, pixels, rems, or any other units. By default we provide a sensible + | rem based numeric scale, a percentage based fraction scale, plus some + | other common use-cases like "full" and "screen". You can, of course, + | modify these values as needed. + | + | It's also worth mentioning that Tailwind automatically escapes invalid + | CSS class name characters, which allows you to have awesome classes + | like .w-2/3. | | Class name: .w-{size} | @@ -450,7 +462,10 @@ module.exports = { | Height https://tailwindcss.com/docs/height |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your height utility sizes. These can be percentage + | based, pixels, rems, or any other units. By default we provide a sensible + | rem based numeric scale plus some other common use-cases like "full" and + | "screen". You can, of course, modify these values as needed. | | Class name: .h-{size} | @@ -482,7 +497,10 @@ module.exports = { | Minimum width https://tailwindcss.com/docs/min-width |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your minimum width utility sizes. These can be + | percentage based, pixels, rems, or any other units. We provide a couple + | common use-cases by default. You can, of course, modify these values + | as needed. | | Class name: .min-w-{size} | @@ -499,7 +517,10 @@ module.exports = { | Minimum height https://tailwindcss.com/docs/min-height |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your minimum height utility sizes. These can be + | percentage based, pixels, rems, or any other units. We provide a few + | common use-cases by default. You can, of course, modify these values + | as needed. | | Class name: .min-h-{size} | @@ -517,7 +538,11 @@ module.exports = { | Maximum width https://tailwindcss.com/docs/max-width |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your maximum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based scale and a "full width" size, + | which is basically a reset utility. You can, of course, + | modify these values as needed. | | Class name: .max-w-{size} | @@ -542,7 +567,10 @@ module.exports = { | Maximum height https://tailwindcss.com/docs/max-height |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your maximum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. | | Class name: .max-h-{size} | From b414ac5d1037ccc250a77b76be4a585f4666c264 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 17:14:24 -0400 Subject: [PATCH 13/17] Add docs to config for margins and padding --- defaultConfig.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index 0febb3a4e..a5b7e10a9 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -587,7 +587,11 @@ module.exports = { | Padding https://tailwindcss.com/docs/padding |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your padding utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. | | Class name: .p{-side?}-{size} | @@ -610,7 +614,11 @@ module.exports = { | Margin https://tailwindcss.com/docs/margin |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your margin utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. | | Class name: .m{-side?}-{size} | @@ -633,7 +641,11 @@ module.exports = { | Negative margin https://tailwindcss.com/docs/negative-margin |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your negative margin utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default we + | provide matching values to the padding scale since these utilities + | generally get used together. You can, of course, modify these + | values as needed. | | Class name: .-m{-side?}-{size} | From 78bbb668b96b29965c56132bf807536565fe42ef Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 17:33:18 -0400 Subject: [PATCH 14/17] Finish initial draft of the config docs --- defaultConfig.js | 122 +++++++++++++++++++++++++---------------------- 1 file changed, 66 insertions(+), 56 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index a5b7e10a9..2018f6ab4 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -18,8 +18,8 @@ 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 +| This variable contains the default Tailwind config. You don't have +| to use it, but it can sometimes be helpful to have available. For | example, you may choose to merge your custom configuration | values with some of the Tailwind defaults. | @@ -218,10 +218,10 @@ module.exports = { | 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 - | sense to you. We use size names by default, but you're welcome to - | use a numeric scale or even something else entirely. + | Here is where you define your text sizes. Name these in whatever way + | makes the most sense to you. We use size names by default, but + | you're welcome to use a numeric scale or even something else + | entirely. | | By default Tailwind uses the "rem" unit type for most measurements. | This allows you to set a root font size which all other sizes are @@ -249,11 +249,10 @@ module.exports = { | 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 - | names with their respective numeric scale values to get you started. - | It's unlikely that your project will require all of these, so we - | recommend removing those you don't need. + | Here is where you define your font weights. We've provided a list of + | common font weight names with their respective numeric scale values + | to get you started. It's unlikely that your project will require + | all of these, so we recommend removing those you don't need. | | Class name: .font-{weight} | @@ -277,8 +276,8 @@ module.exports = { | 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. + | Here is where you define your line height values, or as we call + | them in Tailwind, leadings. | | Class name: .leading-{size} | @@ -297,8 +296,8 @@ module.exports = { | 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. + | Here is where you define your letter spacing values, or as we call + | them in Tailwind, tracking. | | Class name: .tracking-{size} | @@ -316,8 +315,8 @@ module.exports = { | Text colors https://tailwindcss.com/docs/text-colors |----------------------------------------------------------------------------- | - | Here is where you define your text colors. By default these use the color - | palette we defined above, however you're welcome to set these + | Here is where you define your text colors. By default these use the + | color palette we defined above, however you're welcome to set these | independently if that makes sense for your project. | | Class name: .text-{color} @@ -332,9 +331,9 @@ module.exports = { | Background colors https://tailwindcss.com/docs/background-colors |----------------------------------------------------------------------------- | - | Here is where you define your background colors. By default these use the - | color palette we defined above, however you're welcome to set these - | independently if that makes sense for your project. + | Here is where you define your background colors. By default these use + | the color palette we defined above, however you're welcome to set + | these independently if that makes sense for your project. | | Class name: .bg-{color} | @@ -348,9 +347,9 @@ module.exports = { | Border widths https://tailwindcss.com/docs/border-widths |----------------------------------------------------------------------------- | - | Here is where you define your border widths. Take note that border widths - | require a special "default" value set as well. This is the width that - | will be used when you do not specify a border color. + | Here is where you define your border widths. Take note that border + | widths require a special "default" value set as well. This is the + | width that will be used when you do not specify a border color. | | Class name: .border{-side?}{-width?} | @@ -374,9 +373,9 @@ module.exports = { | color palette we defined above, however you're welcome to set these | independently if that makes sense for your project. | - | Take note that border colors require a special "default" value set as - | well. This is the color that will be used when you do not specify a - | border color. + | Take note that border colors require a special "default" value set + | as well. This is the color that will be used when you do not + | specify a border color. | | Class name: .border-{color} | @@ -390,8 +389,8 @@ module.exports = { | Border radius https://tailwindcss.com/docs/border-radius |----------------------------------------------------------------------------- | - | Here is where you define your border radius values. Take note that a - | default radius is required. This is the value used when you use the + | Here is where you define your border radius values. Take note that + | a default radius is required. This is the value used for the | non-suffixed version of this utility (.rounded). | | Class name: .rounded-{radius?} @@ -411,15 +410,16 @@ module.exports = { | Width https://tailwindcss.com/docs/width |----------------------------------------------------------------------------- | - | Here is where you define your width utility sizes. These can be percentage - | based, pixels, rems, or any other units. By default we provide a sensible - | rem based numeric scale, a percentage based fraction scale, plus some - | other common use-cases like "full" and "screen". You can, of course, - | modify these values as needed. + | Here is where you define your width utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale, a percentage + | based fraction scale, plus some other common use-cases. You + | can, of course, modify these values as needed. | - | It's also worth mentioning that Tailwind automatically escapes invalid - | CSS class name characters, which allows you to have awesome classes - | like .w-2/3. + | + | It's also worth mentioning that Tailwind automatically escapes + | invalid CSS class name characters, which allows you to have + | awesome classes like .w-2/3. | | Class name: .w-{size} | @@ -462,10 +462,11 @@ module.exports = { | Height https://tailwindcss.com/docs/height |----------------------------------------------------------------------------- | - | Here is where you define your height utility sizes. These can be percentage - | based, pixels, rems, or any other units. By default we provide a sensible - | rem based numeric scale plus some other common use-cases like "full" and - | "screen". You can, of course, modify these values as needed. + | Here is where you define your height utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale plus some other + | common use-cases. You can, of course, modify these values as + | needed. | | Class name: .h-{size} | @@ -497,10 +498,10 @@ module.exports = { | Minimum width https://tailwindcss.com/docs/min-width |----------------------------------------------------------------------------- | - | Here is where you define your minimum width utility sizes. These can be - | percentage based, pixels, rems, or any other units. We provide a couple - | common use-cases by default. You can, of course, modify these values - | as needed. + | Here is where you define your minimum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. | | Class name: .min-w-{size} | @@ -517,10 +518,10 @@ module.exports = { | Minimum height https://tailwindcss.com/docs/min-height |----------------------------------------------------------------------------- | - | Here is where you define your minimum height utility sizes. These can be - | percentage based, pixels, rems, or any other units. We provide a few - | common use-cases by default. You can, of course, modify these values - | as needed. + | Here is where you define your minimum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | few common use-cases by default. You can, of course, modify these + | values as needed. | | Class name: .min-h-{size} | @@ -668,16 +669,21 @@ module.exports = { | Shadows https://tailwindcss.com/docs/shadows |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your shadow utilities. As you can see from + | the defaults we provide, it's possible to apply multiple shadows + | per utility using comma separation. | - | Class name: .shadow-{size} + | Take note that a default shadow is required. This is the value used + | for the non-suffixed version of this utility (.shadow). + | + | Class name: .shadow-{size?} | */ shadows: { default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)', - 'md': ['0 3px 6px rgba(0,0,0,.12)', '0 3px 6px rgba(0,0,0,.13)'], - 'lg': ['0 10px 20px rgba(0,0,0,.13)', '0 6px 6px rgba(0,0,0,.13)'], + 'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)', + 'lg': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)', 'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)', 'none': 'none', }, @@ -688,7 +694,9 @@ module.exports = { | Z-index https://tailwindcss.com/docs/z-index |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your z-index utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. | | Class name: .z-{name} | @@ -710,7 +718,9 @@ module.exports = { | Opacity https://tailwindcss.com/docs/opacity |----------------------------------------------------------------------------- | - | Add... + | Here is where you define your opacity utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. | | Class name: .opacity-{name} | @@ -732,8 +742,8 @@ module.exports = { | | 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 each package's documentation - | for a list of settings available for it. + | complete themes. You'll want to reference each package's + | documentation for a list of settings available for it. | */ From 3e58d198d8c3431e07d1acff6a51ef077f01e4d5 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 17:56:50 -0400 Subject: [PATCH 15/17] Update generators for the new config keys --- defaultConfig.js | 2 +- src/generators/backgroundColors.js | 4 ++-- src/generators/borderColors.js | 4 ++-- src/generators/borderWidths.js | 8 ++++---- src/generators/rounded.js | 6 +++--- src/generators/sizing.js | 14 +++++++------- src/generators/spacing.js | 8 ++++---- src/generators/textColors.js | 4 ++-- src/generators/textFonts.js | 4 ++-- src/generators/textLeading.js | 4 ++-- src/generators/textSizes.js | 4 ++-- src/generators/textTracking.js | 4 ++-- src/generators/textWeights.js | 4 ++-- 13 files changed, 35 insertions(+), 35 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index 2018f6ab4..411c8e334 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -381,7 +381,7 @@ module.exports = { | */ - borderColors: Object.assign({ default: colors['slate-lighter'] }, colors) + borderColors: Object.assign({ default: colors['slate-lighter'] }, colors), /* diff --git a/src/generators/backgroundColors.js b/src/generators/backgroundColors.js index b398823d9..1e33cc1e9 100644 --- a/src/generators/backgroundColors.js +++ b/src/generators/backgroundColors.js @@ -2,8 +2,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' import hoverable from '../util/hoverable' -export default function ({ backgrounds }) { - return hoverable(_.map(backgrounds.colors, (color, className) => { +export default function ({ backgroundColors }) { + return hoverable(_.map(backgroundColors, (color, className) => { return defineClass(`bg-${className}`, { 'background-color': color, }) diff --git a/src/generators/borderColors.js b/src/generators/borderColors.js index cfb72b6bb..c7e327ef9 100644 --- a/src/generators/borderColors.js +++ b/src/generators/borderColors.js @@ -2,8 +2,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' import hoverable from '../util/hoverable' -export default function ({ colors, borders }) { - return hoverable(_.map(_.omit(borders.colors, 'default'), (color, className) => { +export default function ({ borderColors }) { + return hoverable(_.map(_.omit(borderColors, 'default'), (color, className) => { return defineClass(`border-${className}`, { 'border-color': color, }) diff --git a/src/generators/borderWidths.js b/src/generators/borderWidths.js index 41da11190..f5ef2eab2 100644 --- a/src/generators/borderWidths.js +++ b/src/generators/borderWidths.js @@ -44,11 +44,11 @@ function sizedBorder(size, width, color) { }) } -module.exports = function({colors, borders}) { - const color = borders.colors.default +module.exports = function({ borderWidths, borderColors }) { + const color = borderColors.default return _.flatten([ - defaultBorder(borders.widths.default, color), - ..._.map(_.omit(borders.widths, 'default'), (width, size) => sizedBorder(size, width, color)), + defaultBorder(borderWidths.default, color), + ..._.map(_.omit(borderWidths, 'default'), (width, size) => sizedBorder(size, width, color)), ]) } diff --git a/src/generators/rounded.js b/src/generators/rounded.js index e81de85b8..6dd50f70c 100644 --- a/src/generators/rounded.js +++ b/src/generators/rounded.js @@ -49,9 +49,9 @@ function roundedVariant(modifier, radius) { }) } -module.exports = function({ radiuses }) { +module.exports = function({ borderRadius }) { return _.flatten([ - defaultRounded(radiuses.default), - ..._.map(_.omit(radiuses, 'default'), (radius, modifier) => roundedVariant(modifier, radius)), + defaultRounded(borderRadius.default), + ..._.map(_.omit(borderRadius, 'default'), (radius, modifier) => roundedVariant(modifier, radius)), ]) } diff --git a/src/generators/sizing.js b/src/generators/sizing.js index 2d8751687..f4d8180f1 100644 --- a/src/generators/sizing.js +++ b/src/generators/sizing.js @@ -49,13 +49,13 @@ function defineMaxHeights(heights) { }) } -export default function ({ sizing }) { +export default function (config) { return _.flatten([ - defineWidths(sizing.width), - defineMinWidths(sizing.minWidth), - defineMaxWidths(sizing.maxWidth), - defineHeights(sizing.height), - defineMinHeights(sizing.minHeight), - defineMaxHeights(sizing.maxHeight), + defineWidths(config.width), + defineMinWidths(config.minWidth), + defineMaxWidths(config.maxWidth), + defineHeights(config.height), + defineMinHeights(config.minHeight), + defineMaxHeights(config.maxHeight), ]) } diff --git a/src/generators/spacing.js b/src/generators/spacing.js index 40469c680..566477f47 100644 --- a/src/generators/spacing.js +++ b/src/generators/spacing.js @@ -93,10 +93,10 @@ function defineNegativeMargin(negativeMargin) { }) } -export default function ({ spacing }) { +export default function ({ padding, margin, negativeMargin }) { return _.flatten([ - definePadding(spacing.padding), - defineMargin(spacing.margin), + definePadding(padding), + defineMargin(margin), defineClasses({ 'mr-auto': { 'margin-right': 'auto', @@ -109,6 +109,6 @@ export default function ({ spacing }) { 'margin-right': 'auto', }, }), - defineNegativeMargin(spacing.negativeMargin), + defineNegativeMargin(negativeMargin), ]) } diff --git a/src/generators/textColors.js b/src/generators/textColors.js index b4500b68d..7ead0593f 100644 --- a/src/generators/textColors.js +++ b/src/generators/textColors.js @@ -2,8 +2,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' import hoverable from '../util/hoverable' -export default function ({ colors, text }) { - return hoverable(_.map(text.colors, (color, modifier) => { +export default function ({ textColors }) { + return hoverable(_.map(textColors, (color, modifier) => { return defineClass(`text-${modifier}`, { 'color': color, }) diff --git a/src/generators/textFonts.js b/src/generators/textFonts.js index 77b8c002f..40e676d97 100644 --- a/src/generators/textFonts.js +++ b/src/generators/textFonts.js @@ -1,8 +1,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -export default function ({ text }) { - return _.map(text.fonts, (families, font) => { +export default function ({ fonts }) { + return _.map(fonts, (families, font) => { return defineClass(`font-${font}`, { 'font-family': `${families}`, }) diff --git a/src/generators/textLeading.js b/src/generators/textLeading.js index 994f9f655..3fd79fe82 100644 --- a/src/generators/textLeading.js +++ b/src/generators/textLeading.js @@ -1,8 +1,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -export default function ({ text }) { - return _.map(text.leading, (value, modifier) => { +export default function ({ leading }) { + return _.map(leading, (value, modifier) => { return defineClass(`leading-${modifier}`, { 'line-height': `${value}`, }) diff --git a/src/generators/textSizes.js b/src/generators/textSizes.js index 84f78346e..1e6afd506 100644 --- a/src/generators/textSizes.js +++ b/src/generators/textSizes.js @@ -1,8 +1,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -export default function ({ text }) { - return _.map(text.sizes, (size, modifier) => { +export default function ({ textSizes }) { + return _.map(textSizes, (size, modifier) => { return defineClass(`text-${modifier}`, { 'font-size': `${size}`, }) diff --git a/src/generators/textTracking.js b/src/generators/textTracking.js index 119a7c35f..e36eef651 100644 --- a/src/generators/textTracking.js +++ b/src/generators/textTracking.js @@ -1,8 +1,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' -export default function ({ text }) { - return _.map(text.tracking, (value, modifier) => { +export default function ({ tracking }) { + return _.map(tracking, (value, modifier) => { return defineClass(`tracking-${modifier}`, { 'letter-spacing': `${value}`, }) diff --git a/src/generators/textWeights.js b/src/generators/textWeights.js index e6b22da27..476878e44 100644 --- a/src/generators/textWeights.js +++ b/src/generators/textWeights.js @@ -2,8 +2,8 @@ import _ from 'lodash' import defineClass from '../util/defineClass' import hoverable from '../util/hoverable' -export default function ({ text }) { - return hoverable(_.map(text.weights, (weight, modifier) => { +export default function ({ fontWeights }) { + return hoverable(_.map(fontWeights, (weight, modifier) => { return defineClass(`font-${modifier}`, { 'font-weight': `${weight}`, }) From ea4b64837e92c755aca12dd924f8a1a12091fada Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 18:18:22 -0400 Subject: [PATCH 16/17] Allow font families to be defined as arrays --- __tests__/fixtures/tailwind.css | 20 ++++++++++---------- src/generators/textFonts.js | 4 ++++ 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css index 889c254aa..7b832cd17 100644 --- a/__tests__/fixtures/tailwind.css +++ b/__tests__/fixtures/tailwind.css @@ -673,11 +673,11 @@ button, } .font-serif { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; + font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; } .font-mono { - font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .text-black, @@ -3419,11 +3419,11 @@ button, } .sm\:font-serif { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; + font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; } .sm\:font-mono { - font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .sm\:text-black, @@ -6166,11 +6166,11 @@ button, } .md\:font-serif { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; + font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; } .md\:font-mono { - font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .md\:text-black, @@ -8913,11 +8913,11 @@ button, } .lg\:font-serif { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; + font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; } .lg\:font-mono { - font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .lg\:text-black, @@ -11660,11 +11660,11 @@ button, } .xl\:font-serif { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; + font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif; } .xl\:font-mono { - font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; } .xl\:text-black, diff --git a/src/generators/textFonts.js b/src/generators/textFonts.js index 40e676d97..85accaabf 100644 --- a/src/generators/textFonts.js +++ b/src/generators/textFonts.js @@ -3,6 +3,10 @@ import defineClass from '../util/defineClass' export default function ({ fonts }) { return _.map(fonts, (families, font) => { + if (_.isArray(families)) { + families = families.join(', ') + } + return defineClass(`font-${font}`, { 'font-family': `${families}`, }) From 12faf8af8acd8468e65f09602f1e486eef4fe69e Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 25 Oct 2017 19:04:38 -0400 Subject: [PATCH 17/17] Tweak config docs --- defaultConfig.js | 1 - 1 file changed, 1 deletion(-) diff --git a/defaultConfig.js b/defaultConfig.js index 411c8e334..c0a4fb2d9 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -13,7 +13,6 @@ we've done our very best to explain each section. View the full documentation at https://tailwindcss.com. -/* |------------------------------------------------------------------------------- | The default config |-------------------------------------------------------------------------------