mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
835922812b
Fixes #14205 Fixes #14106 This PR reworks the Vite extension in order to supprt `lightningcss` as the pre-processor, enable faster rebuilds, and adds support for `vite build --watch` mode. To make this change possible, we've done two major changes to the extension that have caused the other changes. ## 1. Tailwind CSS is a preprocessor We now run all of our modifications in `enforce: 'pre'`. This means that Tailwind CSS now gets the untransformed CSS files rather than the one already going through postcss or lightningcss. We do this because Tailwind CSS _is_ a preprocessor at the same level as those tools and we do sometimes use the language in ways that [creates problems when it's the input for other bundlers](https://github.com/tailwindlabs/tailwindcss/pull/14269). The correct solution here is to make Tailwind not depend on any other transformations. The main reason we were not using the `enforce: 'pre'` phase in Vite before was becuase we relied on the `@import` flattening of postcss so we now have to do this manually. `@import` flattening is now a concern that every Tailwind V4 client has to deal with so this might actually be something we want to inline into tailwindcss in the future. ## 2. A Vite config can have multiple Tailwind roots This is something that we have not made very explicit in the previous iteration of the Vite plugin but we have to support multiple Tailwind roots in a single Vite workspace. A Tailwind root is a CSS file that is used to configure Tailwind. Technically, any CSS file can be the input for `tailwindcss` but you have to add certain rules (e.g. `@import "tailwindcss";`) to make the compiler do something. A workspace can have multiple of these rules (e.g. by having different Tailwind configures for different sub-pages). With the addition of [support for `@source` rules](https://github.com/tailwindlabs/tailwindcss/pull/14078) and [JS config files](https://github.com/tailwindlabs/tailwindcss/pull/14239), Tailwind roots become more complex and can have a custom list of _dependencies_ (that is other JavaScript modules the compiler includes as part of these new rules). In order to _only rebuild the roots we need to_, we have to make this separation very clear. --------- Co-authored-by: Jordan Pittman <jordan@cryptica.me> Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
48 lines
1.2 KiB
JSON
48 lines
1.2 KiB
JSON
{
|
|
"name": "@tailwindcss/vite",
|
|
"version": "4.0.0-alpha.21",
|
|
"description": "A utility-first CSS framework for rapidly building custom user interfaces.",
|
|
"license": "MIT",
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "https://github.com/tailwindlabs/tailwindcss.git",
|
|
"directory": "packages/@tailwindcss-vite"
|
|
},
|
|
"bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
|
|
"homepage": "https://tailwindcss.com",
|
|
"scripts": {
|
|
"build": "tsup-node",
|
|
"dev": "pnpm run build -- --watch"
|
|
},
|
|
"files": [
|
|
"dist/"
|
|
],
|
|
"publishConfig": {
|
|
"provenance": true,
|
|
"access": "public"
|
|
},
|
|
"exports": {
|
|
".": {
|
|
"types": "./dist/index.d.mts",
|
|
"import": "./dist/index.mjs"
|
|
}
|
|
},
|
|
"dependencies": {
|
|
"@tailwindcss/node": "workspace:^",
|
|
"@tailwindcss/oxide": "workspace:^",
|
|
"lightningcss": "catalog:",
|
|
"postcss": "^8.4.41",
|
|
"postcss-import": "^16.1.0",
|
|
"tailwindcss": "workspace:^"
|
|
},
|
|
"devDependencies": {
|
|
"@types/node": "catalog:",
|
|
"@types/postcss-import": "^14.0.3",
|
|
"internal-postcss-fix-relative-paths": "workspace:^",
|
|
"vite": "catalog:"
|
|
},
|
|
"peerDependencies": {
|
|
"vite": "^5.2.0"
|
|
}
|
|
}
|