tailwindcss/packages
Tim Neutkens bccf4bbfbd
Add @tailwindcss/webpack loader for Tailwind CSS v4 (#19610)
## Summary

This PR adds a new `@tailwindcss/webpack` package that provides a
dedicated webpack loader for Tailwind CSS v4. This loader works with
both standard webpack and Turbopack's webpack loader compatibility
layer.

### Why a dedicated loader?

The current webpack integration uses `postcss-loader` +
`@tailwindcss/postcss`. While this works, a dedicated loader:

- **Eliminates PostCSS as a middleman** - works directly with CSS
strings (no AST conversions)
- **Simpler and more efficient** - follows the same pattern as
`@tailwindcss/vite`
- **Better for Turbopack** - gives direct control over dependency
reporting via webpack's loader API

### How it works

The loader mirrors the Vite plugin's approach:

1. Uses `compile()` from `@tailwindcss/node` to parse CSS and resolve
`@apply` directives
2. Uses `Scanner` from `@tailwindcss/oxide` to scan content files for
utility candidates
3. Reports dependencies via `this.addDependency()` and
`this.addContextDependency()`
4. Optionally optimizes output with Lightning CSS

### Usage

```javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          '@tailwindcss/webpack',  // No PostCSS needed!
        ],
      },
    ],
  },
}
```

### Options

- `base` - The base directory to scan for class candidates (defaults to
`process.cwd()`)
- `optimize` - Whether to optimize/minify the output CSS (defaults to
`true` in production)

### Files added

- `packages/@tailwindcss-webpack/` - New package
  - `src/index.ts` - Main loader implementation
  - `src/index.cts` - CommonJS entry point for webpack compatibility
  - `package.json`, `tsconfig.json`, `tsup.config.ts`, `README.md`
- `integrations/webpack/loader.test.ts` - Integration tests
- `integrations/utils.ts` - Added webpack override for transitive
dependencies

### Test plan

- [x] Build test - verifies basic compilation
- [x] Watch test - verifies HMR when adding new Tailwind classes
- [x] `@apply` test - verifies `@apply` directives work correctly
- [x] Optimization test - verifies minification works

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2026-01-29 14:16:31 +00:00
..
@tailwindcss-browser Release v4.1.18 (#19431) 2025-12-11 10:55:25 -05:00
@tailwindcss-cli Update enhanced-resolve 5.18.3 → 5.18.4 (patch) (#19462) 2025-12-18 15:03:51 -05:00
@tailwindcss-node Update enhanced-resolve 5.18.3 → 5.18.4 (patch) (#19462) 2025-12-18 15:03:51 -05:00
@tailwindcss-postcss Add @tailwindcss/webpack loader for Tailwind CSS v4 (#19610) 2026-01-29 14:16:31 +00:00
@tailwindcss-standalone Update @types/bun 1.3.3 → 1.3.5 (patch) (#19491) 2025-12-25 18:22:13 -05:00
@tailwindcss-upgrade Fix typo in comment (#19493) 2025-12-27 11:56:29 -05:00
@tailwindcss-vite Release v4.1.18 (#19431) 2025-12-11 10:55:25 -05:00
@tailwindcss-webpack Add @tailwindcss/webpack loader for Tailwind CSS v4 (#19610) 2026-01-29 14:16:31 +00:00
internal-example-plugin Prefix internal modules with internal-* (#14074) 2024-07-29 10:58:07 -04:00
tailwindcss Improve @utility name validation (#19524) 2026-01-06 12:54:43 +01:00
tsconfig.base.json Improve debug logs (#15303) 2024-12-11 15:27:20 +01:00