@tailwindcss/postcss

A utility-first CSS framework for rapidly building custom user interfaces.

Documentation

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or feature ideas:

Discuss Tailwind CSS on GitHub

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.

@tailwindcss/postcss plugin API

Changing where the plugin searches for source files

You can use the base option (defaults to the current working directory) to change the directory in which the plugin searches for source files:

import tailwindcss from '@tailwindcss/postcss'

export default {
  plugins: [
    tailwindcss({
      base: path.resolve(__dirname, './path'),
    }),
  ],
}

Enabling or disabling Lightning CSS

By default, this plugin detects whether or not the CSS is being built for production by checking the NODE_ENV environment variable. When building for production Lightning CSS will be enabled otherwise it is disabled.

If you want to always enable or disable Lightning CSS the optimize option may be used:

import tailwindcss from '@tailwindcss/postcss'

export default {
  plugins: [
    tailwindcss({
      // Enable or disable Lightning CSS
      optimize: false,
    }),
  ],
}

It's also possible to keep Lightning CSS enabled but disable minification:

import tailwindcss from '@tailwindcss/postcss'

export default {
  plugins: [
    tailwindcss({
      optimize: { minify: false },
    }),
  ],
}

Enabling or disabling url(…) rewriting

Our PostCSS plugin can rewrite url(…)s for you since it also handles @import (no postcss-import is needed). This feature is enabled by default.

In some situations the bundler or framework you're using may provide this feature itself. In this case you can set transformAssetUrls to false to disable this feature:

import tailwindcss from '@tailwindcss/postcss'

export default {
  plugins: [
    tailwindcss({
      // Disable `url(…)` rewriting
      transformAssetUrls: false,

      // Enable `url(…)` rewriting (the default)
      transformAssetUrls: true,
    }),
  ],
}

Similar packages

Other packages similar to @tailwindcss/postcss

@unocss/postcss

A PostCSS integration for UnoCSS, an on-demand atomic CSS engine. It is similar in that it generates utility CSS from class usage during a PostCSS build. UnoCSS has its own presets and configuration model, so its utilities and behavior are not a drop-in match for Tailwind’s.

postcss-preset-env

A PostCSS plugin that transforms modern CSS features for broader browser compatibility. It shares the PostCSS integration point, but it does not scan markup or generate utility classes; it focuses on CSS syntax and compatibility transformations instead.