685c19e266
This PR fixes an issue when using `@tailwindcss/vite` and you're trying to resolve paths. In the latest 4.2.3 release, we added support for following the vite `aliases` option. However, some people run into issues because if you just use `@` as an alias then using `@tailwindcss/typography` wouldn't resolve because it's a package, and not something local. With this PR we fix that by making sure that Vite's resolver can actually resolve to an absolute path. If not, then we fallback to the resolving that happens in `@tailwindcss/node`. Fixes: #19946 ## Test plan 1. Added an integration test that reproduces this issue, and is now solved 2. Tested it on a reproduction provided in the corresponding issue Before: <img width="1694" height="1856" alt="image" src="https://github.com/user-attachments/assets/c50f7104-78b3-476d-9e60-0c83e0976a5c" /> After: <img width="1694" height="1856" alt="image" src="https://github.com/user-attachments/assets/44ea0e3b-f60f-479f-a4a1-203a6230475b" />
111 lines
3.6 KiB
Markdown
111 lines
3.6 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=main" 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/tailwindlabs/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
|
|
<a href="https://github.com/tailwindlabs/tailwindcss/blob/main/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/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/postcss` plugin API
|
|
|
|
### Changing where the plugin searches for source files
|
|
|
|
You can use the `base` option (defaults to the current working directory) to change the directory in which the plugin searches for source files:
|
|
|
|
```js
|
|
import tailwindcss from '@tailwindcss/postcss'
|
|
|
|
export default {
|
|
plugins: [
|
|
tailwindcss({
|
|
base: path.resolve(__dirname, './path'),
|
|
}),
|
|
],
|
|
}
|
|
```
|
|
|
|
### 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/postcss'
|
|
|
|
export default {
|
|
plugins: [
|
|
tailwindcss({
|
|
// Enable or disable Lightning CSS
|
|
optimize: false,
|
|
}),
|
|
],
|
|
}
|
|
```
|
|
|
|
It's also possible to keep Lightning CSS enabled but disable minification:
|
|
|
|
```js
|
|
import tailwindcss from '@tailwindcss/postcss'
|
|
|
|
export default {
|
|
plugins: [
|
|
tailwindcss({
|
|
optimize: { minify: false },
|
|
}),
|
|
],
|
|
}
|
|
```
|
|
|
|
### Enabling or disabling `url(…)` rewriting
|
|
|
|
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:
|
|
|
|
```js
|
|
import tailwindcss from '@tailwindcss/postcss'
|
|
|
|
export default {
|
|
plugins: [
|
|
tailwindcss({
|
|
// Disable `url(…)` rewriting
|
|
transformAssetUrls: false,
|
|
|
|
// Enable `url(…)` rewriting (the default)
|
|
transformAssetUrls: true,
|
|
}),
|
|
],
|
|
}
|
|
```
|