Configuration

A guide to configuring and customizing your Tailwind installation.

Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind.

By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.

// Example `tailwind.config.js` file
module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

Every section of the config file is optional, so you only have to specify what you’d like to change. Any missing sections will fall back to Tailwind’s default configuration.

Creating your configuration file

Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

npx tailwind init

This will create a minimal tailwind.config.js file at the root of your project:

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

Using a different file name

To use a name other than tailwind.config.js, pass it as an argument on the command-line:

npx tailwind init tailwindcss-config.js

If you use a custom file name, you will need to specify it when including Tailwind as a plugin in your PostCSS configuration as well:

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss')('./tailwindcss-config.js'),
  ],
}

Scaffolding the entire default configuration

For most users we encourage you to keep your config file as minimal as possible, and only specify the things you want to customize.

If you’d rather scaffold a complete configuration file that includes all of Tailwind’s default configuration, use the —full option:

npx tailwind init --full

You’ll get a file that matches the default configuration file Tailwind uses internally.

Theme

The theme section is where you define your color palette, font stacks, type scale, border sizes, breakpoints — anything related to the visual design of your site.

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    borderWidth: {
      default: '1px',
      '0': '0',
      '2': '2px',
      '4': '4px',
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      spacing: {
        '96': '24rem',
        '128': '32rem',
      }
    }
  }
}

Learn more about the default theme and how to customize it in the theme configuration guide.

Variants

The variants section lets you control which variants are generated for each core utility plugin.

// tailwind.config.js
module.exports = {
  variants: {
    appearance: ['responsive'],
    backgroundColors: ['responsive', 'hover', 'focus'],
    fill: [],
  },
}

Learn more in the variants configuration guide.

Plugins

The plugins section allows you to register third-party plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants.

// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-transforms'),
    require('tailwindcss-transitions'),
    require('tailwindcss-border-gradients'),
  ],
}

Learn more about writing your own plugins in the plugin authoring guide.

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:

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

Now every utility will be generated with the configured prefix:

.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */

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-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

Prefixes are only added to classes generated by Tailwind; no prefix will be added to your own custom classes.

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: 640px) {
  .sm\:bg-brand-gradient { /* ... */ }
}
@media (min-width: 768px) {
  .md\:bg-brand-gradient { /* ... */ }
}
@media (min-width: 992) {
  .lg\:bg-brand-gradient { /* ... */ }
}
@media (min-width: 1280px) {
  .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:

// tailwind.config.js
module.exports = {
  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-snug {
  line-height: 1.375 !important;
}
/* etc. */

Note that any of your own custom utilities will not automatically be marked as !important 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 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.

// tailwind.config.js
module.exports = {
  separator: '_',
}

Core Plugins

The corePlugins section lets you completely disable classes that Tailwind would normally generate by default if you don’t need them for your project.

If you don’t provide any corePlugins configuration, all core plugins will be enabled by default:

// tailwind.config.js
module.exports = {}

If you’d like to disable specific core plugins, provide an object for corePlugins that sets those plugins to false:

// tailwind.config.js
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

If you’d like to whitelist which core plugins should be enabled, provide an array that includes a list of the core plugins you’d like to use:

// tailwind.config.js
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    // ...
  ]
}

If you’d like to disable all of Tailwind’s core plugins and simply use Tailwind as a tool for processing your own custom plugins, provide an empty array:

// tailwind.config.js
module.exports = {
  corePlugins: []
}

Here’s a list of every core plugin for reference: