tailwindcss Documentation

Technical Documentation: tailwindlabs/tailwindcss

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`) Copy Section

Documentation Copy Chapter

For full documentation, visit tailwindcss.com.

Community Copy Chapter

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

Discuss Tailwind CSS on GitHub

Contributing Copy Chapter

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

Overview (`crates/ignore/README.md`) Copy Section

ignore

The ignore crate provides a fast recursive directory iterator that respects
various filters such as globs, file types and .gitignore files. This crate
also provides lower level direct access to gitignore and file type matchers.

Dual-licensed under MIT or the UNLICENSE.

Documentation Copy Section

https://docs.rs/ignore

Usage Copy Section

Add this to your Cargo.toml:

[dependencies]
ignore = "0.4"

Example Copy Section

This example shows the most basic usage of this crate. This code will
recursively traverse the current directory while automatically filtering out
files and directories according to ignore globs found in files like
.ignore and .gitignore:

use ignore::Walk;

for result in Walk::new("./") {
    // Each item yielded by the iterator is either a directory entry or an
    // error, so either print the path or the error.
    match result {
        Ok(entry) => println!("{}", entry.path().display()),
        Err(err) => println!("ERROR: {}", err),
    }
}

Example: advanced Copy Section

By default, the recursive directory iterator will ignore hidden files and
directories. This can be disabled by building the iterator with WalkBuilder:

use ignore::WalkBuilder;

for result in WalkBuilder::new("./").hidden(false).build() {
    println!("{:?}", result);
}

See the documentation for WalkBuilder for many other options.

Overview (`packages/@tailwindcss-browser/README.md`) Copy Section

Documentation Copy Chapter

For full documentation, visit tailwindcss.com.

Community Copy Chapter

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

Discuss Tailwind CSS on GitHub

Contributing Copy Chapter

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

Overview (`packages/@tailwindcss-cli/README.md`) Copy Section

Documentation Copy Chapter

For full documentation, visit tailwindcss.com.

Community Copy Chapter

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

Discuss Tailwind CSS on GitHub

Contributing Copy Chapter

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

Overview (`packages/@tailwindcss-node/README.md`) Copy Section

Documentation Copy Chapter

For full documentation, visit tailwindcss.com.

Community Copy Chapter

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

Discuss Tailwind CSS on GitHub

Contributing Copy Chapter

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

Overview (`packages/@tailwindcss-postcss/README.md`) Copy Section

Documentation Copy Chapter

For full documentation, visit tailwindcss.com.

Community Copy Chapter

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

Discuss Tailwind CSS on GitHub

Contributing Copy Chapter

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

`@tailwindcss/postcss` plugin API Copy Chapter

Changing where the plugin searches for source files Copy Section

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 Copy Section

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 Copy Section

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,
    }),
  ],
}

Overview (`packages/@tailwindcss-turbopack/README.md`) Copy Section

Documentation Copy Chapter

For full documentation, visit tailwindcss.com.

Community Copy Chapter

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

Discuss Tailwind CSS on GitHub

Contributing Copy Chapter

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

@tailwindcss/turbopack Copy Chapter

A Turbopack loader for Tailwind CSS v4.

Installation Copy Chapter

npm install @tailwindcss/turbopack

Usage Copy Section

// 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';

Options Copy Section

`base`

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

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

`optimize`

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

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

Overview (`packages/@tailwindcss-upgrade/README.md`) Copy Section

Documentation Copy Chapter

For full documentation, visit tailwindcss.com.

Community Copy Chapter

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

Discuss Tailwind CSS on GitHub

Contributing Copy Chapter

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

Overview (`packages/@tailwindcss-vite/README.md`) Copy Section

Documentation Copy Chapter

For full documentation, visit tailwindcss.com.

Community Copy Chapter

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

Discuss Tailwind CSS on GitHub

Contributing Copy Chapter

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

`@tailwindcss/vite` plugin API Copy Chapter

Enabling or disabling Lightning CSS Copy Section

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/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    tailwindcss({
      // Disable Lightning CSS optimization
      optimize: false,
    }),
  ],
})

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

import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    tailwindcss({
      // Enable Lightning CSS but disable minification
      optimize: { minify: false },
    }),
  ],
})

Overview (`packages/@tailwindcss-webpack/README.md`) Copy Section

Documentation Copy Chapter

For full documentation, visit tailwindcss.com.

Community Copy Chapter

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

Discuss Tailwind CSS on GitHub

Contributing Copy Chapter

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

@tailwindcss/webpack Copy Chapter

A webpack loader for Tailwind CSS v4.

Installation Copy Chapter

npm install @tailwindcss/webpack

Usage Copy Section

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

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

Options Copy Section

`base`

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

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

`optimize`

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

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

Overview (`packages/tailwindcss/README.md`) Copy Section

Documentation Copy Chapter

For full documentation, visit tailwindcss.com.

Community Copy Chapter

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

Discuss Tailwind CSS on GitHub

Contributing Copy Chapter

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

Overview (`playgrounds/nextjs/README.md`) Copy Section

This is a Next.js project bootstrapped with create-next-app.

Getting Started Copy Chapter

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More Copy Chapter

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel Copy Chapter

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Overview (`crates/node/npm/android-arm-eabi/README.md`) Copy Section

`@tailwindcss/oxide-android-arm-eabi`

This is the armv7-linux-android-eabi binary for @tailwindcss/oxide

Overview (`crates/node/npm/android-arm64/README.md`) Copy Section

`@tailwindcss/oxide-android-arm64`

This is the aarch64-linux-android binary for @tailwindcss/oxide

Overview (`crates/node/npm/darwin-arm64/README.md`) Copy Section

`@tailwindcss/oxide-darwin-arm64`

This is the aarch64-apple-darwin binary for @tailwindcss/oxide

Overview (`crates/node/npm/darwin-x64/README.md`) Copy Section

`@tailwindcss/oxide-darwin-x64`

This is the x86_64-apple-darwin binary for @tailwindcss/oxide

Overview (`crates/node/npm/freebsd-x64/README.md`) Copy Section

`@tailwindcss/oxide-freebsd-x64`

This is the x86_64-unknown-freebsd binary for @tailwindcss/oxide

Overview (`crates/node/npm/linux-arm-gnueabihf/README.md`) Copy Section

`@tailwindcss/oxide-linux-arm-gnueabihf`

This is the armv7-unknown-linux-gnueabihf binary for @tailwindcss/oxide

Overview (`crates/node/npm/linux-arm64-gnu/README.md`) Copy Section

`@tailwindcss/oxide-linux-arm64-gnu`

This is the aarch64-unknown-linux-gnu binary for @tailwindcss/oxide

Overview (`crates/node/npm/linux-arm64-musl/README.md`) Copy Section

`@tailwindcss/oxide-linux-arm64-musl`

This is the aarch64-unknown-linux-musl binary for @tailwindcss/oxide

Overview (`crates/node/npm/linux-x64-gnu/README.md`) Copy Section

`@tailwindcss/oxide-linux-x64-gnu`

This is the x86_64-unknown-linux-gnu binary for @tailwindcss/oxide

Overview (`crates/node/npm/linux-x64-musl/README.md`) Copy Section

`@tailwindcss/oxide-linux-x64-musl`

This is the x86_64-unknown-linux-musl binary for @tailwindcss/oxide

Overview (`crates/node/npm/wasm32-wasi/README.md`) Copy Section

`@tailwindcss/oxide-wasm32-wasi`

This is the wasm32-wasip1-threads build of @tailwindcss/oxide

Overview (`crates/node/npm/win32-arm64-msvc/README.md`) Copy Section

`@tailwindcss/oxide-win32-arm64-msvc`

This is the arm64-pc-windows-msvc binary for @tailwindcss/oxide

Overview (`crates/node/npm/win32-x64-msvc/README.md`) Copy Section

`@tailwindcss/oxide-win32-x64-msvc`

This is the x86_64-pc-windows-msvc binary for @tailwindcss/oxide

--- METRICS ---

• Files Extracted: 25
• Estimated Token Budget: ~7238 tokens
• Canonical Reference: https://codewiki.google/github.com/tailwindlabs/tailwindcss