Tailwind CSS - Configuration

---

---

Tailwind CSS Configuration allows to easily customize the framework as per the project needs by defining various aspects of the framework, such as theme, colors, screen, plugin, etc., using the 'tailwind.config.js' file.

How to Generate the Configuration File?

The following is the list of step-by-step guidance for generating the 'tailwind.config.js' file.

• Tailwind CSS Installation: The Installation of Tailwind CSS is the mandatory step that has to be done first. Run the following command to generate the default configuration file:

  npm install tailwindcss

• Generate the Configuration File: By using the following command, the 'tailwind.config.js' file can be easily generated.

  npx tailwind css init

• Resultant File: The following file will be generated.

Customize the Configuration

The 'tailwind.config.js' file allows to easily customize the configuration and aligns utility classes with project's specific design requirements. We can easily customize the theme, fonts, colors, screens, spacing, plugin, and more on it, as showed below.

• Content: The content section of the 'tailwind.config.js' file enables you to add the path of all HTML templates, JS components, and other files containing Tailwind CSS classes.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}
  

Theme: The Theme section of 'tailwind.config.js' file enables you to customize the visual design of the project by configuring colors, font-family, breakpoints and more, as shown below.

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    }
  }
}

The plugin section of the 'tailwind.config.js' file enables you to add extra utilities, components, base styles, custom variants, and more, as shown below.

Plugin: The Plugin section of 'tailwind.config.js' file enables you to add extra utilities, components, base styles, custom variants, and more, as shown below.

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}

Prefix: The Prefix section of 'tailwind.config.js' file enables you to add a custom prefix to all utility classes, helping to reduce naming conflicts as shown below.

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
}
  

Now every class 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. */
  

Add the dash modifier before your prefix for negative values. For example, -mt-8 becomes -tw-mt-8 if your prefix is tw-.

Note: Prefixes apply only to Tailwind-generated classes, not to your custom classes. To prefix your own utilities, simply add the prefix to the class definition:

@layer utilities {
  .tw-bg-brand-gradient { /* ... */ }
}
  

Important: The important option lets you mark Tailwind utilities with "!important". This helps when you need high specificity in your CSS. To make utilities as '!important', set the 'important' key to 'true' in your configuration.

/** @type {import('tailwindcss').Config} */
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. */
  

This also works for custom utilities you create with the '@layer utilities' directive in your CSS.

/* Input */
@layer utilities {
.bg-brand-gradient {
background-image: linear-gradient(#3490dc, #6574cd);
}
}

/* Output */
.bg-brand-gradient {
background-image: linear-gradient(#3490dc, #6574cd) !important;
}
  

Selector strategy: Setting important to true can cause conflicts with third-party JS libraries using inline styles, as Tailwind's '!important' utilities will override them and may break your design.

To avoid this issue, follow the following measures:

• Set 'important' to an ID selector like '#app'. This configuration prefixes your utilities with the given selector, increasing their specificity without using '!important'.

/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
important: '#app',
}
    

To ensure styles work properly, give your site's root element the same id as the important selector, like id="app".

Make sure to include the template file in your content configuration that contains your root selector.Otherwise, all your CSS will be deleted when you build for production.

Important Modifier You can also make a utility important, by adding a '!' at the beginning of its name. Place the '!' after any variants but before any prefix. This helps when you need more specificity to override other styles.

Separator: The separator option lets you pick a character to divide modifiers (like screen sizes, hover) from utility names (e.g., text-center). By defaults it uses colon (:), but you can change it for templating languages like Pug that don't support special characters.

/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
important: '#app',
}

You can use the corePlugins section to turn off any default Tailwind classes that you don't need.

Core Plugins: You can use the corePlugins section to turn off any default Tailwind classes that you don't need. Just set the unwanted plugins to false in the corePlugins object.

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

If you want to safelist which core plugins should be enabled, list them in an array.

/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: [
'margin',
'padding',
'backgroundColor',
// ...
]
}

If you want to disable all of Tailwind's core plugins and use only your custom plugins, provide an empty array.

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: []
}

Following is the list of every core plugin for reference:

Setting Up multiple Configuration

For projects with multiple CSS files and different Tailwind settings, use the @config directive to select the config file for each CSS file.

@config "./tailwind.site.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

Managing References in JavaScript

You may need to use your configuration values in your JavaScript code, like when adding styles to a React Vue component. Tailwind's resolveConfig helper makes it easy to access these values by combining them into a single object.

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

TypeScript Types

Tailwind CLI adds types automatically, but if you need to do it yourself, add a line above your config.

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
  // ...
],
theme: {
  extend: {},
},
plugins: [],
}