### Run Development Server

Source: https://github.com/doanhidm1/tailwindcss/blob/main/playgrounds/nextjs/README.md

Use these commands to start the Next.js development server. Ensure you have Node.js and a package manager installed.

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

--------------------------------

### Install Tailwind CSS dependencies

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Use these commands to install the framework and its corresponding plugins for your chosen build environment.

```bash
# Install Tailwind CSS and the PostCSS plugin
npm install tailwindcss @tailwindcss/postcss

# Or install with Vite plugin
npm install tailwindcss @tailwindcss/vite

# Or install the CLI for standalone usage
npm install tailwindcss @tailwindcss/cli
```

--------------------------------

### Install Tailwind CSS Webpack Loader

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-webpack/README.md

Use npm to install the loader package in your project.

```sh
npm install @tailwindcss/webpack
```

--------------------------------

### Loading Plugins in CSS

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Illustrates how to load JavaScript plugins directly into your CSS files using the `@plugin` directive. It shows examples of loading plugins without options, local plugins, and plugins with configuration options.

```APIDOC
## Loading Plugins in CSS

Use the `@plugin` directive to load JavaScript plugins directly from your CSS file, with optional configuration passed as CSS properties.

```css
@import "tailwindcss";

/* Load a plugin without options */
@plugin "@tailwindcss/forms";

/* Load a local plugin */
@plugin "./plugins/custom-forms.js";

/* Load a plugin with options */
@plugin "./plugins/typography.js" {
  className: article;
  target: modern;
}
```
```

--------------------------------

### Advanced Directory Traversal Ignoring Hidden Files

Source: https://github.com/doanhidm1/tailwindcss/blob/main/crates/ignore/README.md

This example shows how to customize the directory traversal using `WalkBuilder`. By setting `.hidden(false)`, it disables the default behavior of ignoring hidden files and directories. Further customization options are available in the `WalkBuilder` documentation.

```rust
use ignore::WalkBuilder;

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

--------------------------------

### Configure CSS entry point

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Import Tailwind and define custom theme variables using CSS-native syntax.

```css
/* src/styles.css */
@import "tailwindcss";

/* Customize the default theme */
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-display: "Inter", sans-serif;

  /* Override spacing scale */
  --spacing-128: 32rem;
  --spacing-144: 36rem;
}

/* Add custom base styles */
@layer base {
  html {
    font-family: var(--font-display);
  }
}
```

--------------------------------

### Configurable Plugins with Options

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Demonstrates how to create a configurable Tailwind CSS plugin using `plugin.withOptions()`. This allows users to pass options to the plugin, enabling customization of its behavior and theme extensions.

```APIDOC
## Plugin with Options

Use `plugin.withOptions()` to create configurable plugins that accept user options and can extend the theme.

```javascript
// plugins/typography.js
import plugin from 'tailwindcss/plugin'

export default plugin.withOptions(
  function(options = {}) {
    const { className = 'prose', target = 'modern' } = options

    return function({ addComponents, theme }) {
      addComponents({
        [`.${className}`]: {
          color: theme('colors.gray.700'),
          maxWidth: '65ch',

          'h1, h2, h3, h4': {
            color: theme('colors.gray.900'),
            fontWeight: theme('fontWeight.bold'),
          },

          h1: { fontSize: theme('fontSize.3xl') },
          h2: { fontSize: theme('fontSize.2xl') },
          h3: { fontSize: theme('fontSize.xl') },

          p: {
            marginTop: theme('spacing.4'),
            marginBottom: theme('spacing.4'),
          },

          a: {
            color: theme('colors.blue.600'),
            textDecoration: 'underline',
            '&:hover': {
              color: theme('colors.blue.800'),
            },
          },

          code: {
            backgroundColor: theme('colors.gray.100'),
            padding: theme('spacing.1'),
            borderRadius: theme('borderRadius.sm'),
            fontSize: '0.875em',
          },
        },
      })
    }
  },
  function(options = {}) {
    return {
      theme: {
        extend: {
          // Extend theme with plugin-specific values if needed
        },
      },
    }
  }
)

// Usage in CSS:
// @plugin "./plugins/typography.js" {
//   className: "article";
//   target: "legacy";
// }
```
```

--------------------------------

### Create Configurable Plugin with Options

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Use `plugin.withOptions()` to create plugins that accept user-defined options and can extend the Tailwind theme. The first function defines the plugin's behavior, and the second can extend the theme.

```javascript
// plugins/typography.js
import plugin from 'tailwindcss/plugin'

export default plugin.withOptions(
  function(options = {}) {
    const { className = 'prose', target = 'modern' } = options

    return function({ addComponents, theme }) {
      addComponents({
        [`.${className}`]: {
          color: theme('colors.gray.700'),
          maxWidth: '65ch',

          'h1, h2, h3, h4': {
            color: theme('colors.gray.900'),
            fontWeight: theme('fontWeight.bold'),
          },

          h1: { fontSize: theme('fontSize.3xl') },
          h2: { fontSize: theme('fontSize.2xl') },
          h3: { fontSize: theme('fontSize.xl') },

          p: {
            marginTop: theme('spacing.4'),
            marginBottom: theme('spacing.4'),
          },

          a: {
            color: theme('colors.blue.600'),
            textDecoration: 'underline',
            '&:hover': {
              color: theme('colors.blue.800'),
            },
          },

          code: {
            backgroundColor: theme('colors.gray.100'),
            padding: theme('spacing.1'),
            borderRadius: theme('borderRadius.sm'),
            fontSize: '0.875em',
          },
        },
      })
    }
  },
  function(options = {}) {
    return {
      theme: {
        extend: {
          // Extend theme with plugin-specific values if needed
        },
      },
    }
  }
)

// Usage in CSS:
// @plugin "./plugins/typography.js" {
//   className: "article";
//   target: "legacy";
// }
```

--------------------------------

### Execute CLI build commands

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Run these commands to compile CSS, watch for changes, or normalize class names without a bundler.

```bash
# Build CSS once
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css

# Build and watch for changes
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

# Build with minification
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --minify

# Canonicalize candidate lists (normalize class names)
npx @tailwindcss/cli canonicalize "flex items-center p-4"
```

--------------------------------

### Create Custom Utilities with @utility

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Define static or functional utility classes that support variants like hover or responsive prefixes.

```css
@import "tailwindcss";

/* Static utility */
@utility content-auto {
  content-visibility: auto;
}

/* Static utility with multiple properties */
@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Functional utility with dynamic values (note the -* suffix) */
@utility tab-* {
  tab-size: --value(--tab-size-*);
}

/* Using the utilities in HTML */
/* <div class="content-auto scrollbar-hide hover:content-auto md:tab-4"> */
```

--------------------------------

### Importing Themes with Reference

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Use the reference option to import theme variables without generating CSS output, preventing duplication in multi-entry projects.

```css
/* shared-theme.css */
@theme {
  --color-brand: #ff6b35;
  --font-display: "Poppins", sans-serif;
}

/* main.css - imports theme and generates CSS */
@import "tailwindcss";
@import "./shared-theme.css";

/* component-library.css - imports theme values only, no CSS output */
@import "tailwindcss" reference;
@import "./shared-theme.css";

/* Now you can use theme() function without duplicating theme CSS */
.custom-element {
  color: theme(--color-brand);
  font-family: theme(--font-display);
}
```

--------------------------------

### Configure Loader Options

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-webpack/README.md

Customize the loader behavior using the base directory or optimization settings.

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

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

--------------------------------

### Configure Tailwind CSS PostCSS Plugin Base Directory

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-postcss/README.md

Use the `base` option to specify the directory where the plugin should search for source files. Defaults to the current working directory.

```javascript
import tailwindcss from '@tailwindcss/postcss'

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

--------------------------------

### Configuring the Base Directory

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-postcss/README.md

Customize the directory where the Tailwind CSS PostCSS plugin searches for source files using the `base` option.

```APIDOC
## POST /api/users

### Description
This endpoint allows for the creation of new user resources.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **username** (string) - Required - The desired username for the new user.
- **email** (string) - Required - The email address of the new user.
- **password** (string) - Required - The password for the new user.

### Request Example
```json
{
  "username": "johndoe",
  "email": "john.doe@example.com",
  "password": "securepassword123"
}
```

### Response
#### Success Response (201)
- **id** (string) - The unique identifier for the newly created user.
- **username** (string) - The username of the created user.
- **email** (string) - The email address of the created user.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

--------------------------------

### Configuring CSS Optimization with Lightning CSS

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-postcss/README.md

Control the behavior of Lightning CSS for optimization and minification using the `optimize` option.

```APIDOC
## GET /api/users/{id}

### Description
Retrieves the details of a specific user by their unique identifier.

### Method
GET

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to retrieve.

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the user.
- **username** (string) - The username of the user.
- **email** (string) - The email address of the user.
- **createdAt** (string) - The timestamp when the user was created.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe@example.com",
  "createdAt": "2023-10-27T10:00:00Z"
}
```
```

--------------------------------

### Configure Source Paths with @source

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Specify files for Tailwind to scan for utility classes or exclude specific paths from the scanning process.

```css
@import "tailwindcss";

/* Include additional source paths */
@source "../components/**/*.jsx";
@source "../pages/**/*.tsx";
@source "../../packages/ui/src/**/*.vue";

/* Include inline candidates directly */
@source inline("container mx-auto flex items-center");

/* Exclude paths from scanning */
@source not "../legacy/**/*.html";
@source not inline("deprecated-class");
```

--------------------------------

### Configure PostCSS plugin

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Integrate Tailwind into a PostCSS pipeline with options for base directory and optimization settings.

```javascript
// postcss.config.mjs
import tailwindcss from '@tailwindcss/postcss'

export default {
  plugins: [
    tailwindcss({
      // Base directory for scanning source files (defaults to cwd)
      base: './src',

      // Control Lightning CSS optimization (auto-detects production by default)
      optimize: process.env.NODE_ENV === 'production',

      // Or keep optimization but disable minification
      // optimize: { minify: false },

      // Disable URL rewriting if your bundler handles it
      // transformAssetUrls: false,
    }),
  ],
}
```

--------------------------------

### Compile API for Programmatic Usage

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Explains how to use the core `compile()` function for programmatic access to Tailwind's CSS compilation engine. This is useful for building custom tools, IDE integrations, or build pipelines.

```APIDOC
## Compile API for Programmatic Usage

The core `compile()` function provides programmatic access to Tailwind's compilation engine, useful for building tools, IDE integrations, or custom build pipelines.

```javascript
import { compile } from 'tailwindcss'

// Compile CSS with Tailwind
const css = `
  @import "tailwindcss";

  @theme {
    --color-primary: #3b82f6;
  }
`

const compiler = await compile(css, {
  // Base directory for resolving imports
  base: process.cwd(),

  // Source file path for source maps
  from: 'src/styles.css',

  // Custom module loader for plugins/configs
  async loadModule(id, base, resourceHint) {
    // resourceHint is 'plugin' or 'config'
    const path = await resolve(id, base)
    const module = await import(path)
    return { path, base, module: module.default }
  },

  // Custom stylesheet loader for @import
  async loadStylesheet(id, base) {
    const path = await resolve(id, base)
    const content = await fs.readFile(path, 'utf-8')
    return { path, base, content }
  },
})

// Build CSS with detected candidates
const candidates = ['flex', 'items-center', 'p-4', 'bg-primary', 'hover:bg-primary/80']
const output = compiler.build(candidates)

console.log(output)
// Outputs compiled CSS with only the utilities that match the candidates

// Generate source map
const sourceMap = compiler.buildSourceMap()
```
```

--------------------------------

### Basic Recursive Directory Traversal with Ignore

Source: https://github.com/doanhidm1/tailwindcss/blob/main/crates/ignore/README.md

This snippet demonstrates the fundamental usage of the `Walk` iterator to recursively traverse the current directory. It automatically filters files and directories based on ignore patterns found in files like `.ignore` and `.gitignore`. Errors during traversal are also handled.

```rust
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),
    }
}
```

--------------------------------

### Browser Build for CDN Usage

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Details how to use the `@tailwindcss/browser` package to run Tailwind CSS directly in the browser. This is ideal for playgrounds, documentation sites, and quick prototypes that don't require a build step.

```APIDOC
## Browser Build for CDN Usage

The `@tailwindcss/browser` package enables Tailwind CSS to run directly in the browser, perfect for playgrounds, documentation sites, or quick prototypes without a build step.

```html
<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import 'https://esm.sh/@tailwindcss/browser@4'
  </script>

  <!-- Custom styles in a special style tag -->
  <style type="text/tailwindcss">
    @theme {
      --color-primary: #3b82f6;
    }

    @layer base {
      body {
        @apply bg-gray-50 text-gray-900;
      }
    }
  </style>
</head>
<body>
  <div class="container mx-auto p-8">
    <h1 class="text-4xl font-bold text-primary">Hello Tailwind!</h1>
    <p class="mt-4 text-gray-600">
      Tailwind CSS running directly in the browser.
    </p>
    <button class="mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/80">
      Click me
    </button>
  </div>
</body>
</html>
```
```

--------------------------------

### Load Plugins Directly from CSS

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Use the `@plugin` directive within your CSS to load JavaScript plugins. Configuration options can be passed directly within the directive's curly braces.

```css
@import "tailwindcss";

/* Load a plugin without options */
@plugin "@tailwindcss/forms";

/* Load a local plugin */
@plugin "./plugins/custom-forms.js";

/* Load a plugin with options */
@plugin "./plugins/typography.js" {
  className: article;
  target: modern;
}
```

--------------------------------

### Extend Tailwind with JavaScript Plugins

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Use the plugin() function to programmatically add base styles, utilities, and variants.

```javascript
// plugins/custom-forms.js
import plugin from 'tailwindcss/plugin'

export default plugin(function({ addBase, addUtilities, addVariant, matchUtilities, theme }) {
  // Add base styles
  addBase({
    'input, textarea, select': {
      borderRadius: theme('borderRadius.md'),
      borderWidth: '1px',
      borderColor: theme('colors.gray.300'),
      padding: theme('spacing.2') + ' ' + theme('spacing.3'),
    },
  })

  // Add static utilities
  addUtilities({
    '.input-reset': {
      appearance: 'none',
      backgroundColor: 'transparent',
      borderWidth: '0',
      padding: '0',
    },
  })

  // Add functional utilities with values
  matchUtilities(
    {
      'placeholder-opacity': (value) => ({
        '&::placeholder': {
          opacity: value,
        },
      }),
    },
    {
      values: { 0: '0', 25: '0.25', 50: '0.5', 75: '0.75', 100: '1' },
    }
  )

  // Add custom variants
  addVariant('optional', '&:optional')
  addVariant('required', '&:required')
  addVariant('invalid', '&:invalid')
})
```

--------------------------------

### Define Design Tokens with @theme

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Use the @theme directive to define custom properties that automatically generate utility classes for colors, typography, spacing, and more.

```css
@import "tailwindcss";

@theme {
  /* Colors - generates bg-brand, text-brand, border-brand, etc. */
  --color-brand: #ff6b35;
  --color-brand-dark: #e85a2a;
  --color-brand-light: #ff8c5a;

  /* Typography */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;

  /* Spacing - generates p-18, m-18, gap-18, etc. */
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Shadows */
  --shadow-soft: 0 2px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-glow: 0 0 15px rgb(59 130 246 / 0.5);

  /* Animation keyframes */
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slide-up {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* Animation timing */
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-slide-up: slide-up 0.4s ease-out;
}
```

--------------------------------

### Configure Vite plugin

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Add the Tailwind Vite plugin to your configuration to enable HMR and build optimizations.

```javascript
// vite.config.js
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    tailwindcss({
      // Disable Lightning CSS optimization (enabled by default in production)
      // optimize: false,

      // Enable Lightning CSS but disable minification
      // optimize: { minify: false },
    }),
  ],
})
```

--------------------------------

### Configure Lightning CSS optimization in Vite

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-vite/README.md

Use the optimize option to explicitly enable or disable Lightning CSS features during the build process.

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

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

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

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

--------------------------------

### Configuring Asset URL Rewriting

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-postcss/README.md

Manage the automatic rewriting of `url(...)` references in CSS using the `transformAssetUrls` option.

```APIDOC
## PUT /api/users/{id}

### Description
Updates the details of an existing user identified by their unique ID.

### Method
PUT

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to update.

#### Query Parameters
None

#### Request Body
- **username** (string) - Optional - The new username for the user.
- **email** (string) - Optional - The new email address for the user.

### Request Example
```json
{
  "email": "john.doe.updated@example.com"
}
```

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the updated user.
- **username** (string) - The updated username.
- **email** (string) - The updated email address.
- **updatedAt** (string) - The timestamp when the user was last updated.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe.updated@example.com",
  "updatedAt": "2023-10-27T11:00:00Z"
}
```
```

--------------------------------

### @tailwindcss/webpack Configuration

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-webpack/README.md

Configuration details for integrating the Tailwind CSS loader into a Webpack environment.

```APIDOC
## @tailwindcss/webpack Configuration

### Description
The @tailwindcss/webpack loader processes CSS files to include Tailwind CSS utilities. It is configured within the module rules of a webpack.config.js file.

### Options
- **base** (string) - Optional - The base directory to scan for class candidates. Defaults to the current working directory.
- **optimize** (boolean|object) - Optional - Whether to optimize and minify the output CSS. Defaults to true in production mode.

### Configuration Example
```javascript
{
  loader: '@tailwindcss/webpack',
  options: {
    base: process.cwd(),
    optimize: true
  }
}
```
```

--------------------------------

### Configuring Lightning CSS Optimization

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-vite/README.md

The @tailwindcss/vite plugin allows control over Lightning CSS optimization. By default, it's enabled for production builds. You can explicitly enable or disable it using the 'optimize' option.

```APIDOC
## @tailwindcss/vite Plugin API

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

```js
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:

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

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

--------------------------------

### Configure Webpack loader

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Integrate Tailwind into a Webpack pipeline using the dedicated loader and CSS extraction plugins.

```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',
          {
            loader: '@tailwindcss/webpack',
            options: {
              // Base directory to scan for class candidates
              base: process.cwd(),

              // Enable optimization and minification (defaults to true in production)
              optimize: true,
              // Or: optimize: { minify: false }
            },
          },
        ],
      },
    ],
  },
}
```

--------------------------------

### Programmatic CSS Compilation with Tailwind

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Utilize the `compile()` function for programmatic access to Tailwind's CSS compilation engine. This is useful for custom build tools and IDE integrations, allowing you to define custom themes and load modules/stylesheets.

```javascript
import { compile } from 'tailwindcss'

// Compile CSS with Tailwind
const css = `
  @import "tailwindcss";

  @theme {
    --color-primary: #3b82f6;
  }
`

const compiler = await compile(css, {
  // Base directory for resolving imports
  base: process.cwd(),

  // Source file path for source maps
  from: 'src/styles.css',

  // Custom module loader for plugins/configs
  async loadModule(id, base, resourceHint) {
    // resourceHint is 'plugin' or 'config'
    const path = await resolve(id, base)
    const module = await import(path)
    return { path, base, module: module.default }
  },

  // Custom stylesheet loader for @import
  async loadStylesheet(id, base) {
    const path = await resolve(id, base)
    const content = await fs.readFile(path, 'utf-8')
    return { path, base, content }
  },
})

// Build CSS with detected candidates
const candidates = ['flex', 'items-center', 'p-4', 'bg-primary', 'hover:bg-primary/80']
const output = compiler.build(candidates)

console.log(output)
// Outputs compiled CSS with only the utilities that match the candidates

// Generate source map
const sourceMap = compiler.buildSourceMap()
```

--------------------------------

### Configure Tailwind CSS PostCSS Plugin Lightning CSS Optimization

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-postcss/README.md

Control the `optimize` option to enable or disable Lightning CSS. By default, it's enabled for production builds (NODE_ENV=production).

```javascript
import tailwindcss from '@tailwindcss/postcss'

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

```javascript
import tailwindcss from '@tailwindcss/postcss'

export default {
  plugins: [
    tailwindcss({
      // Enables Lightning CSS but disables minification
      optimize: { minify: false },
    }),
  ],
}
```

--------------------------------

### Import Tailwind in CSS

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-webpack/README.md

Include the Tailwind directive in your main CSS file.

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

--------------------------------

### Browser Build for CDN Usage

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Integrate Tailwind CSS directly into your HTML using the `@tailwindcss/browser` package via a CDN. This allows Tailwind to run in the browser without a build step, suitable for playgrounds and prototypes.

```html
<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import 'https://esm.sh/@tailwindcss/browser@4'
  </script>

  <!-- Custom styles in a special style tag -->
  <style type="text/tailwindcss">
    @theme {
      --color-primary: #3b82f6;
    }

    @layer base {
      body {
        @apply bg-gray-50 text-gray-900;
      }
    }
  </style>
</head>
<body>
  <div class="container mx-auto p-8">
    <h1 class="text-4xl font-bold text-primary">Hello Tailwind!</h1>
    <p class="mt-4 text-gray-600">
      Tailwind CSS running directly in the browser.
    </p>
    <button class="mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/80">
      Click me
    </button>
  </div>
</body>
</html>
```

--------------------------------

### Accessing Theme Values with theme()

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Use the theme() function to reference design tokens in custom CSS, supporting fallbacks and opacity modifiers.

```css
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --spacing-gutter: 2rem;
  --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.custom-component {
  /* Reference theme values */
  background-color: theme(--color-primary);
  padding: theme(--spacing-gutter);
  box-shadow: theme(--shadow-card);

  /* Use with fallback */
  border-radius: theme(--radius-lg, 0.5rem);

  /* Access nested values */
  color: theme(--color-primary / 80%);
}
```

--------------------------------

### Define Custom Variants with @custom-variant

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Create reusable variant selectors for state-based or contextual styling using CSS rules or @slot.

```css
@import "tailwindcss";

/* Simple selector variant */
@custom-variant hocus (&:hover, &:focus);

/* At-rule variant for print styles */
@custom-variant print (@media print);

/* Complex variant with @slot */
@custom-variant theme-dark {
  @media (prefers-color-scheme: dark) {
    @slot;
  }
}

/* Variant depending on parent state */
@custom-variant group-active {
  :merge(.group):active & {
    @slot;
  }
}

/* Using in HTML: <button class="hocus:bg-blue-600 print:hidden theme-dark:bg-gray-800"> */
```

--------------------------------

### Enabling Important Mode

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Apply !important to all utilities by adding the important keyword to the @import or @tailwind directive.

```css
/* Enable important mode via @import option */
@import "tailwindcss" important;

/* Or set important on the @tailwind directive */
@tailwind utilities important;
```

--------------------------------

### Upgrade Tool for v3 to v4 Migration

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Introduces the `@tailwindcss/upgrade` tool, which automates the migration of Tailwind CSS v3 projects to v4. It handles tasks like converting JavaScript configs to CSS, updating deprecated classes, and modernizing the codebase.

```APIDOC
## Upgrade Tool for v3 to v4 Migration

The `@tailwindcss/upgrade` tool automatically migrates Tailwind CSS v3 projects to v4, converting JavaScript configs to CSS, updating deprecated classes, and modernizing your codebase.

```bash
# Run the upgrade tool (requires clean git directory)
npx @tailwindcss/upgrade

# Specify a config file
npx @tailwindcss/upgrade --config tailwind.config.js

# Force migration even with uncommitted changes
npx @tailwindcss/upgrade --force

# Upgrade specific CSS files only
npx @tailwindcss/upgrade src/styles.css src/components.css
```
```

--------------------------------

### Upgrade Tailwind CSS Projects to v4

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Use the `@tailwindcss/upgrade` tool to automatically migrate Tailwind CSS v3 projects to v4. This tool converts JavaScript configurations to CSS, updates deprecated classes, and modernizes your codebase.

```bash
# Run the upgrade tool (requires clean git directory)
npx @tailwindcss/upgrade

# Specify a config file
npx @tailwindcss/upgrade --config tailwind.config.js

# Force migration even with uncommitted changes
npx @tailwindcss/upgrade --force

# Upgrade specific CSS files only
npx @tailwindcss/upgrade src/styles.css src/components.css
```

--------------------------------

### Configure Webpack for Tailwind CSS

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-webpack/README.md

Add the loader to your webpack.config.js rules to process CSS files.

```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'],
      },
    ],
  },
}
```

--------------------------------

### Extracting Components with @apply

Source: https://context7.com/doanhidm1/tailwindcss/llms.txt

Use the @apply directive to group utility classes into reusable custom CSS classes within the @layer components block.

```css
@import "tailwindcss";

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-semibold transition-colors;
  }

  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-900 hover:bg-gray-300;
  }

  .card {
    @apply bg-white rounded-xl shadow-lg p-6;
  }

  .input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
  }
}
```

--------------------------------

### Configure Tailwind CSS PostCSS Plugin Asset URL Rewriting

Source: https://github.com/doanhidm1/tailwindcss/blob/main/packages/@tailwindcss-postcss/README.md

Manage the `transformAssetUrls` option to enable or disable the plugin's ability to rewrite `url(…)` assets. This feature is enabled by default.

```javascript
import tailwindcss from '@tailwindcss/postcss'

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

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.