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

For full documentation, visit tailwindcss.com.

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

Discuss Tailwind CSS on GitHub

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

A Turbopack loader for Tailwind CSS v4.

npm install @tailwindcss/turbopack

// next.config.js
module.exports = {
  turbopack: {
    rules: {
      '*.css': {
        loaders: ['@tailwindcss/turbopack'],
        as: '*.css',
      },
    },
  },
}

Then create a CSS file that imports Tailwind:

/* src/index.css */
@import 'tailwindcss';

The base directory to scan for class candidates. Defaults to the current working directory.

{
  loader: '@tailwindcss/turbopack',
  options: {
    base: process.cwd(),
  },
}

Whether to optimize and minify the output CSS. Defaults to true in production mode.

{
  loader: '@tailwindcss/turbopack',
  options: {
    optimize: true, // or { minify: true }
  },
}