Skip to main content

Tailwind CSS

Tailwind CSS is a utility-first CSS framework. For plain CSS and Sass notes see CSS; for setting it up in a Next.js project see Next.js.

Purge unused styles​

Strip unused utility classes from the production build with PurgeCSS.

npm install @fullhuman/postcss-purgecss -D

postcss.config.js:

module.exports = () => ({
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: [
        './**/*.html',
        './**/*.pug',
        './**/*.jsx',
        // etc.
      ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
  ],
});

Troubleshooting​

No utility classes were detected​

Tailwind CSS warning: No utility classes were detected in your source files

Expected in a new project where no class names have been used yet; the warning clears once your markup references Tailwind classes.

Unknown at rule @tailwind​

Install the Tailwind CSS IntelliSense extension in VS Code, then associate CSS files with the Tailwind language mode so the @tailwind directives are recognized. In Settings ▸ Workspace ▸ files.associations:

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}