Configuration
A guide to configuring and customizing your Tailwind installation.
At the heart of every Tailwind project is a JavaScript configuration file that serves as the home for your project's design system.
It's where you define your color palette, font stacks, type scale, border sizes, breakpoints, opacity scale, you name it. Your config file is like an executable style guide for your project.
We provide a sensible default configuration with a very generous set of values to get you started, but you own this file; you're encouraged to change it as much as you need to fit the goals of your design.
It's important to understand that unlike other CSS frameworks you might have used, none of the settings in this file are coupled to each other. Nothing bad will happen even if you completely delete all of the values for a given module.
Generating your configuration file
Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:
./node_modules/.bin/tailwind init [filename]
By default, tailwind init will generate a tailwind.js config file at the root of your project, but feel free to name this file differently or store it in a different location if you prefer.
Default configuration
Your generated configuration file contains all of Tailwind's default configuration values, ready for you to customize.
/*
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 configuration
| values with some of the Tailwind defaults.
|
*/
// let defaultConfig = require('tailwindcss/defaultConfig')()
/*
|-------------------------------------------------------------------------------
| Colors https://tailwindcss.com/docs/colors
|-------------------------------------------------------------------------------
|
| Here you can specify the colors used in your project. To get you started,
| we've provided a generous palette of great looking colors that are perfect
| for prototyping, but don't hesitate to change them for your project. You
| own these colors, nothing will break if you change everything about them.
|
| We've used literal color names ("red", "blue", etc.) for the default
| palette, but if you'd rather use functional names like "primary" and
| "secondary", or even a numeric scale like "100" and "200", go for it.
|
*/
let colors = {
'transparent': 'transparent',
'black': '#22292f',
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey': '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
'white': '#ffffff',
'red-darkest': '#3b0d0c',
'red-darker': '#621b18',
'red-dark': '#cc1f1a',
'red': '#e3342f',
'red-light': '#ef5753',
'red-lighter': '#f9acaa',
'red-lightest': '#fcebea',
'orange-darkest': '#462a16',
'orange-darker': '#613b1f',
'orange-dark': '#de751f',
'orange': '#f6993f',
'orange-light': '#faad63',
'orange-lighter': '#fcd9b6',
'orange-lightest': '#fff5eb',
'yellow-darkest': '#453411',
'yellow-darker': '#684f1d',
'yellow-dark': '#f2d024',
'yellow': '#ffed4a',
'yellow-light': '#fff382',
'yellow-lighter': '#fff9c2',
'yellow-lightest': '#fcfbeb',
'green-darkest': '#0f2f21',
'green-darker': '#1a4731',
'green-dark': '#1f9d55',
'green': '#38c172',
'green-light': '#51d88a',
'green-lighter': '#a2f5bf',
'green-lightest': '#e3fcec',
'teal-darkest': '#0d3331',
'teal-darker': '#20504f',
'teal-dark': '#38a89d',
'teal': '#4dc0b5',
'teal-light': '#64d5ca',
'teal-lighter': '#a0f0ed',
'teal-lightest': '#e8fffe',
'blue-darkest': '#12283a',
'blue-darker': '#1c3d5a',
'blue-dark': '#2779bd',
'blue': '#3490dc',
'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff',
'indigo-darkest': '#191e38',
'indigo-darker': '#2f365f',
'indigo-dark': '#5661b3',
'indigo': '#6574cd',
'indigo-light': '#7886d7',
'indigo-lighter': '#b2b7ff',
'indigo-lightest': '#e6e8ff',
'purple-darkest': '#21183c',
'purple-darker': '#382b5f',
'purple-dark': '#794acf',
'purple': '#9561e2',
'purple-light': '#a779e9',
'purple-lighter': '#d6bbfc',
'purple-lightest': '#f3ebff',
'pink-darkest': '#451225',
'pink-darker': '#6f213f',
'pink-dark': '#eb5286',
'pink': '#f66d9b',
'pink-light': '#fa7ea8',
'pink-lighter': '#ffbbca',
'pink-lightest': '#ffebef',
}
module.exports = {
/*
|-----------------------------------------------------------------------------
| Colors https://tailwindcss.com/docs/colors
|-----------------------------------------------------------------------------
|
| 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
| using Tailwind's config helper. For example:
|
| .error { color: config('colors.red') }
|
*/
colors: colors,
/*
|-----------------------------------------------------------------------------
| Screens https://tailwindcss.com/docs/responsive-design
|-----------------------------------------------------------------------------
|
| Screens in Tailwind are translated to 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. 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 see the full responsive
| documentation for a complete list of options.
|
| Class name: .{screen}:{utility}
|
*/
screens: {
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
},
/*
|-----------------------------------------------------------------------------
| 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.
| 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.
|
| Class name: .font-{name}
| CSS property: font-family
|
*/
fonts: {
'sans': [
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
'sans-serif',
],
'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 https://tailwindcss.com/docs/text-sizing
|-----------------------------------------------------------------------------
|
| 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
| 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}
| CSS property: font-size
|
*/
textSizes: {
'xs': '.75rem', // 12px
'sm': '.875rem', // 14px
'base': '1rem', // 16px
'lg': '1.125rem', // 18px
'xl': '1.25rem', // 20px
'2xl': '1.5rem', // 24px
'3xl': '1.875rem', // 30px
'4xl': '2.25rem', // 36px
'5xl': '3rem', // 48px
},
/*
|-----------------------------------------------------------------------------
| Font weights https://tailwindcss.com/docs/font-weight
|-----------------------------------------------------------------------------
|
| 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}
| CSS property: font-weight
|
*/
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/line-height
|-----------------------------------------------------------------------------
|
| Here is where you define your line height values, or as we call
| them in Tailwind, leadings.
|
| Class name: .leading-{size}
| CSS property: line-height
|
*/
leading: {
'none': 1,
'tight': 1.25,
'normal': 1.5,
'loose': 2,
},
/*
|-----------------------------------------------------------------------------
| Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing
|-----------------------------------------------------------------------------
|
| Here is where you define your letter spacing values, or as we call
| them in Tailwind, tracking.
|
| Class name: .tracking-{size}
| CSS property: letter-spacing
|
*/
tracking: {
'tight': '-0.05em',
'normal': '0',
'wide': '0.05em',
},
/*
|-----------------------------------------------------------------------------
| Text colors https://tailwindcss.com/docs/text-color
|-----------------------------------------------------------------------------
|
| 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}
| CSS property: color
|
*/
textColors: colors,
/*
|-----------------------------------------------------------------------------
| Background colors https://tailwindcss.com/docs/background-color
|-----------------------------------------------------------------------------
|
| 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}
| CSS property: background-color
|
*/
backgroundColors: colors,
/*
|-----------------------------------------------------------------------------
| Background sizes https://tailwindcss.com/docs/background-size
|-----------------------------------------------------------------------------
|
| Here is where you define your background sizes. We provide some common
| values that are useful in most projects, but feel free to add other sizes
| that are specific to your project here as well.
|
| Class name: .bg-{size}
| CSS property: background-size
|
*/
backgroundSize: {
'auto': 'auto',
'cover': 'cover',
'contain': 'contain',
},
/*
|-----------------------------------------------------------------------------
| Border widths https://tailwindcss.com/docs/border-width
|-----------------------------------------------------------------------------
|
| 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 width.
|
| Class name: .border{-side?}{-width?}
| CSS property: border-width
|
*/
borderWidths: {
default: '1px',
'0': '0',
'2': '2px',
'4': '4px',
'8': '8px',
},
/*
|-----------------------------------------------------------------------------
| Border colors https://tailwindcss.com/docs/border-color
|-----------------------------------------------------------------------------
|
| 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}
| CSS property: border-color
|
*/
borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
/*
|-----------------------------------------------------------------------------
| Border radius https://tailwindcss.com/docs/border-radius
|-----------------------------------------------------------------------------
|
| Here is where you define your border radius values. If a `default` radius
| is provided, it will be made available as the non-suffixed `.rounded`
| utility.
|
| If your scale includes a `0` value to reset already rounded corners, it's
| a good idea to put it first so other values are able to override it.
|
| Class name: .rounded{-side?}{-size?}
| CSS property: border-radius
|
*/
borderRadius: {
'none': '0',
'sm': '.125rem',
default: '.25rem',
'lg': '.5rem',
'full': '9999px',
},
/*
|-----------------------------------------------------------------------------
| 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. 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}
| CSS property: width
|
*/
width: {
'auto': 'auto',
'px': '1px',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'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 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. You can, of course, modify these values as
| needed.
|
| Class name: .h-{size}
| CSS property: height
|
*/
height: {
'auto': 'auto',
'px': '1px',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'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 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.
|
| Class name: .min-w-{size}
| CSS property: min-width
|
*/
minWidth: {
'0': '0',
'full': '100%',
},
/*
|-----------------------------------------------------------------------------
| 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.
|
| Class name: .min-h-{size}
| CSS property: min-height
|
*/
minHeight: {
'0': '0',
'full': '100%',
'screen': '100vh',
},
/*
|-----------------------------------------------------------------------------
| Maximum width https://tailwindcss.com/docs/max-width
|-----------------------------------------------------------------------------
|
| 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}
| CSS property: max-width
|
*/
maxWidth: {
'xs': '20rem',
'sm': '30rem',
'md': '40rem',
'lg': '50rem',
'xl': '60rem',
'2xl': '70rem',
'3xl': '80rem',
'4xl': '90rem',
'5xl': '100rem',
'full': '100%',
},
/*
|-----------------------------------------------------------------------------
| Maximum height https://tailwindcss.com/docs/max-height
|-----------------------------------------------------------------------------
|
| 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}
| CSS property: max-height
|
*/
maxHeight: {
'full': '100%',
'screen': '100vh',
},
/*
|-----------------------------------------------------------------------------
| Padding https://tailwindcss.com/docs/padding
|-----------------------------------------------------------------------------
|
| 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}
| CSS property: padding
|
*/
padding: {
'px': '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
/*
|-----------------------------------------------------------------------------
| Margin https://tailwindcss.com/docs/margin
|-----------------------------------------------------------------------------
|
| 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}
| CSS property: margin
|
*/
margin: {
'auto': 'auto',
'px': '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
/*
|-----------------------------------------------------------------------------
| Negative margin https://tailwindcss.com/docs/negative-margin
|-----------------------------------------------------------------------------
|
| 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}
| CSS property: margin
|
*/
negativeMargin: {
'px': '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
/*
|-----------------------------------------------------------------------------
| Shadows https://tailwindcss.com/docs/shadows
|-----------------------------------------------------------------------------
|
| 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.
|
| If a `default` shadow is provided, it will be made available as the non-
| suffixed `.shadow` utility.
|
| Class name: .shadow-{size?}
| CSS property: box-shadow
|
*/
shadows: {
default: '0 2px 4px 0 rgba(0,0,0,0.10)',
'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
'outline': '0 0 0 3px rgba(52,144,220,0.5)',
'none': 'none',
},
/*
|-----------------------------------------------------------------------------
| Z-index https://tailwindcss.com/docs/z-index
|-----------------------------------------------------------------------------
|
| 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-{index}
| CSS property: z-index
|
*/
zIndex: {
'auto': 'auto',
'0': 0,
'10': 10,
'20': 20,
'30': 30,
'40': 40,
'50': 50,
},
/*
|-----------------------------------------------------------------------------
| Opacity https://tailwindcss.com/docs/opacity
|-----------------------------------------------------------------------------
|
| 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}
| CSS property: opacity
|
*/
opacity: {
'0': '0',
'25': '.25',
'50': '.5',
'75': '.75',
'100': '1',
},
/*
|-----------------------------------------------------------------------------
| SVG fill https://tailwindcss.com/docs/svg
|-----------------------------------------------------------------------------
|
| Here is where you define your SVG fill colors. By default we just provide
| `fill-current` which sets the fill to the current text color. This lets you
| specify a fill color using existing text color utilities and helps keep the
| generated CSS file size down.
|
| Class name: .fill-{name}
| CSS property: fill
|
*/
svgFill: {
'current': 'currentColor',
},
/*
|-----------------------------------------------------------------------------
| SVG stroke https://tailwindcss.com/docs/svg
|-----------------------------------------------------------------------------
|
| Here is where you define your SVG stroke colors. By default we just provide
| `stroke-current` which sets the stroke to the current text color. This lets
| you specify a stroke color using existing text color utilities and helps
| keep the generated CSS file size down.
|
| Class name: .stroke-{name}
| CSS property: stroke
|
*/
svgStroke: {
'current': 'currentColor',
},
/*
|-----------------------------------------------------------------------------
| Modules https://tailwindcss.com/docs/configuration#modules
|-----------------------------------------------------------------------------
|
| Here is where you control which modules are generated and what variants are
| generated for each of those modules.
|
| Currently supported variants:
| - responsive
| - hover
| - focus
| - focus-within
| - active
| - group-hover
|
| To disable a module completely, use `false` instead of an array.
|
*/
modules: {
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundColors: ['responsive', 'hover', 'focus'],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
borderCollapse: [],
borderColors: ['responsive', 'hover', 'focus'],
borderRadius: ['responsive'],
borderStyle: ['responsive'],
borderWidths: ['responsive'],
cursor: ['responsive'],
display: ['responsive'],
flexbox: ['responsive'],
float: ['responsive'],
fonts: ['responsive'],
fontWeights: ['responsive', 'hover', 'focus'],
height: ['responsive'],
leading: ['responsive'],
lists: ['responsive'],
margin: ['responsive'],
maxHeight: ['responsive'],
maxWidth: ['responsive'],
minHeight: ['responsive'],
minWidth: ['responsive'],
negativeMargin: ['responsive'],
objectFit: false,
objectPosition: false,
opacity: ['responsive'],
outline: ['focus'],
overflow: ['responsive'],
padding: ['responsive'],
pointerEvents: ['responsive'],
position: ['responsive'],
resize: ['responsive'],
shadows: ['responsive', 'hover', 'focus'],
svgFill: [],
svgStroke: [],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColors: ['responsive', 'hover', 'focus'],
textSizes: ['responsive'],
textStyle: ['responsive', 'hover', 'focus'],
tracking: ['responsive'],
userSelect: ['responsive'],
verticalAlign: ['responsive'],
visibility: ['responsive'],
whitespace: ['responsive'],
width: ['responsive'],
zIndex: ['responsive'],
},
/*
|-----------------------------------------------------------------------------
| Plugins https://tailwindcss.com/docs/plugins
|-----------------------------------------------------------------------------
|
| Here is where you can register any plugins you'd like to use in your
| project. Tailwind's built-in `container` plugin is enabled by default to
| give you a Bootstrap-style responsive container component out of the box.
|
| Be sure to view the complete plugin documentation to learn more about how
| the plugin system works.
|
*/
plugins: [
require('tailwindcss/plugins/container')({
// center: true,
// padding: '1rem',
}),
],
/*
|-----------------------------------------------------------------------------
| Advanced Options https://tailwindcss.com/docs/configuration#options
|-----------------------------------------------------------------------------
|
| Here is where you can tweak advanced configuration options. We recommend
| leaving these options alone unless you absolutely need to change them.
|
*/
options: {
prefix: '',
important: false,
separator: ':',
},
}
Configuration Sections
Colors
The colors property doesn't actually affect your generated CSS on its own, but it's the perfect place to centralize your color palette so you can refer to it in your own CSS using Tailwind's config() function.
// ...
var colors = {
'transparent': 'transparent',
// ...
'pink-lightest': '#ffebef',
}
// ...
module.exports = {
// ...
colors: colors,
// ...
}By default, the colors property simply references a colors variable defined earlier in the file. Using a separate variable for your color palette like this makes it easy to re-use those colors when defining the color palette for individual utilities, like background colors, text colors, or border colors.
Learn more about defining colors in Tailwind in the Colors documentation.
Screens
The screens property is where you define your project's breakpoints, and will be used to generate responsive versions of Tailwind's utility classes.
// ...
module.exports = {
// ...
screens: {
'sm': '576px',
'md': '768px',
'lg': '992px',
'xl': '1200px',
},
// ...
}We provide a familiar set of breakpoints that you might recognize from Bootstrap to get you started, but you're free to change these as needed to suit your project.
Learn more about customizing screens in the Responsive Design documentation.
Styles
The next set of properties define all of the values you'd like to use for utilities that are dynamically generated.
This includes things like:
- Background colors
- Border widths
- Font families
- Font weights
- Text sizes
- Padding, margin, and negative margin scales
- Width and height scales
...and many others.
For example, here's the section used to customize which border radius utilities will be generated:
// ...
module.exports = {
// ...
/*
|-----------------------------------------------------------------------------
| Border radius https://tailwindcss.com/docs/border-radius
|-----------------------------------------------------------------------------
|
| Here is where you define your border radius values. If a `default` radius
| is provided, it will be made available as the non-suffixed `.rounded`
| utility.
|
| If your scale includes a `0` value to reset already rounded corners, it's
| a good idea to put it first so other values are able to override it.
|
| Class name: .rounded{-side?}{-size?}
|
*/
borderRadius: {
'none': '0',
'sm': '.125rem',
default: '.25rem',
'lg': '.5rem',
'full': '9999px',
},
// ...
}Read through the generated config file or visit the "customizing" documentation for each module to learn more.
Modules
The modules property is where you control which modules are generated, and what state variants to generate for each module.
// ...
module.exports = {
// ...
modules: {
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundColors: ['responsive', 'hover'],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
// ...
},
// ...
}Each property is a module name pointing to an array of state variants to generate for that module.
The available state variants are:
responsive, for generating breakpoint-specific versions of those utilitieshover, for generating versions of those utilities that only take effect on hoverfocus, for generating versions of those utilities that only take effect on focusactive, for generating versions of those utilities that only take effect when an element is activegroup-hover, for generating versions of those utilities that only take effect when a marked parent element is hoveredfocus-within, for generating versions of those utilities that only take effect when a child element has focus
...as well as any custom variants added through plugins.
It's important to note that (responsive excluded) variants are generated in the order you specify them, so variants at the end of the list will take precedence over variants at the beginning of the list.
Learn more about state variants in the "State Variants" documentation.
To include a module but not generate any state variants, use an empty array:
// ...
module.exports = {
// ...
modules: {
// Include the `appearance` utilities, but not responsive,
// focus, hover, etc. versions.
appearance: [],
// ...
},
// ...
}To completely disable a module, set it to false:
// ...
module.exports = {
// ...
modules: {
// Don't include this module at all.
appearance: false,
// ...
},
// ...
}If a module is missing from your configuration file, the default configuration for that module will be used.
Options
Prefix
The prefix option allows you to add a custom prefix to all of Tailwind's generated utility classes.
This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts.
For example, you could add a tw- prefix by setting the prefix option like so:
{
// ...
options: {
prefix: 'tw-',
// ...
}
}You can also pass a function to the prefix option if you need more fine-grained control:
{
// ...
options: {
prefix: function (selector) {
if (selector === '.container') {
return 'tw-'
}
return ''
},
// ...
}
}It's important to understand that this prefix is added to the beginning of each utility name, not to the entire class name.
That means that classes with responsive or state prefixes like sm: or hover: will still have the responsive or state prefix first, with your custom prefix appearing after the colon:
<div class="tw-text-lg md:tw-text-xl tw-bg-red hover:tw-bg-blue">
<!-- -->
</div>Prefixes are only added to standard Tailwind utilities; no prefix will be added to your own custom utilities.
That means if you add your own responsive utility like this:
@responsive {
.bg-brand-gradient { ... }
}...the generated responsive classes will not have your configured prefix:
.bg-brand-gradient { ... }
@media (min-width: 576px) {
.sm\:bg-brand-gradient { ... }
}
@media (min-width: 768px) {
.md\:bg-brand-gradient { ... }
}
@media (min-width: 992) {
.lg\:bg-brand-gradient { ... }
}
@media (min-width: 1200px) {
.xl\:bg-brand-gradient { ... }
}If you'd like to prefix your own utilities as well, just add the prefix to the class definition:
@responsive {
.tw-bg-brand-gradient { ... }
}Important
The important option lets you control whether or not Tailwind's utilities should be marked with !important.
This can be really useful when using Tailwind with existing CSS that has high specificity selectors.
To generate utilities as !important, set the important key in your configuration options to true:
{
// ...
options: {
important: true,
// ...
}
}Now all of Tailwind's utility classes will be generated as !important:
.leading-none {
line-height: 1 !important;
}
.leading-tight {
line-height: 1.25 !important;
}
.leading-normal {
line-height: 1.5 !important;
}
.leading-loose {
line-height: 2 !important;
}Note that any of your own custom utilities will not be marked as !important just by enabling this option.
If you'd like to make your own utilities !important, just add !important to the end of each declaration yourself:
@responsive {
.bg-brand-gradient {
background-image: linear-gradient(#3490dc, #6574cd) !important;
}
}Separator
The separator option lets you customize what character or string should be used to separate state variant prefixes (screen sizes, hover, focus, etc.) from utility names (text-center, items-end, etc.).
We use a colon by default (:), but it can be useful to change this if you're using a templating language like Pug that doesn't support special characters in class names.
// ...
module.exports = {
// ...
options: {
// ...
separator: '_',
},
}