README - Tailwindcss

</picture>

</a> A utility-first CSS framework for rapidly building custom user interfaces. <a href="https://github.com/tailwindlabs/tailwindcss/actions"></a> <a href="https://www.npmjs.com/package/tailwindcss"></a> <a href="https://github.com/tailwindlabs/tailwindcss/releases"></a> <a href="https://github.com/tailwindlabs/tailwindcss/blob/main/LICENSE"></a>

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/webpack

A webpack loader for Tailwind CSS v4.

Installation

npm install @tailwindcss/webpack

Usage

javascript

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', '@tailwindcss/webpack'],
      },
    ],
  },
}

Then create a CSS file that imports Tailwind:

css

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

Options

`base`

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

javascript

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

`optimize`

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

javascript

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