extends	title	description
_layouts.documentation	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.

{!! str_replace('./plugins/container', 'tailwindcss/plugins/container', str_replace('// var defaultConfig', 'var defaultConfig', file_get_contents(dirname(__DIR__).'/node_modules/tailwindcss/defaultConfig.stub.js'))) !!}

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 utilities
hover, for generating versions of those utilities that only take effect on hover
focus, for generating versions of those utilities that only take effect on focus
active, for generating versions of those utilities that only take effect when an element is active
group-hover, for generating versions of those utilities that only take effect when a marked parent element is hovered
focus-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: '_',
  },

}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

configuration.blade.md

configuration.blade.md

Generating your configuration file

Default configuration

Configuration Sections

Colors

Screens

Styles

Modules

Options

Prefix

Important

Separator

Files

configuration.blade.md

Latest commit

History

configuration.blade.md

File metadata and controls

Generating your configuration file

Default configuration

Configuration Sections

Colors

Screens

Styles

Modules

Options

Prefix

Important

Separator