A utility-first CSS framework for rapidly building custom user interfaces.
---
## Documentation
For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
## Community
For help, discussion about best practices, or feature ideas:
[Discuss Tailwind CSS on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)
## Contributing
If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindlabs/tailwindcss/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
---
## @tailwindcss/webpack
A webpack loader for Tailwind CSS v4.
## Installation
```sh
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 }
},
}
```
---
_Source: https://npm.io/package/@tailwindcss/webpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
