mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
89cbfc7b2d
Adds an `optimize` option to the Vite plugin that matches the API and
behavior of the PostCSS plugin.
Supports three formats:
- `optimize: false` - disable optimization
- `optimize: true` - enable optimization with minification
- `optimize: { minify: false }` - enable optimization without
minification
🤖 Generated with [Claude Code](https://claude.ai/code)
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
77 lines
2.7 KiB
Markdown
77 lines
2.7 KiB
Markdown
<p align="center">
|
|
<a href="https://tailwindcss.com" target="_blank">
|
|
<picture>
|
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-dark.svg">
|
|
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg">
|
|
<img alt="Tailwind CSS" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg" width="350" height="70" style="max-width: 100%;">
|
|
</picture>
|
|
</a>
|
|
</p>
|
|
|
|
<p align="center">
|
|
A utility-first CSS framework for rapidly building custom user interfaces.
|
|
</p>
|
|
|
|
<p align="center">
|
|
<a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=next" alt="Build Status"></a>
|
|
<a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
|
|
<a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
|
|
<a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
|
|
</p>
|
|
|
|
---
|
|
|
|
## 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/tailwindcss/tailwindcss/discussions)
|
|
|
|
## Contributing
|
|
|
|
If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/next/.github/CONTRIBUTING.md) **before submitting a pull request**.
|
|
|
|
---
|
|
|
|
## `@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 },
|
|
}),
|
|
],
|
|
})
|
|
```
|