No description
9ab47329b8
This PR adds support for `addBase` in JS plugins which adds styles into
the CSS base layer using `@layer base`. This exists for backwards
compatibility with v3 but is not something we will encourage people to
use going forward — in v4 it's better to just write these styles in a
CSS file.
In v3, `@layer base` was something we compiled away and was only used
for determining where to add some styles in the final CSS, but in v4 we
are using native CSS layers. This means that `addBase` in v4 expects you
to have a _real_ `@layer base` in your final CSS, which you will have as
long as you are using `@import "tailwindcss"` to add Tailwind to your
project.
Now something like this works:
```js
function ({ addBase }) {
addBase({
'h1': { fontSize: '2em' },
'h2': { fontSize: '1.5em' },
})
}
```
Which will emit the following CSS:
```css
@layer base {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
}
```
The only limitation compared to v3 is that there is no way for you to
wrap these styles in another custom layer.
In v3 you could do this:
```css
@layer my-base {
@tailwind base;
}
```
…and then anything you added with `addBase` would end up exactly where
`@tailwind base` was in your source CSS.
But in v4 there is no `@tailwind base`, so there's no way to wrap these
styles in `@layer my-base` like in the example above. All base styles
added by plugins are simply appended to the end of the stylesheet but
wrapped in `@layer base` so they behave as if they are co-located with
other base styles.
Odds of this impacting anyone are extremely low, but if it proves to be
an actual issue I think we could output these styles at the location of
an optional `@tailwind base` rule if we detect it exists.
|
||
|---|---|---|
| .github | ||
| crates | ||
| integrations | ||
| packages | ||
| playgrounds | ||
| scripts | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| turbo.json | ||
| vitest.workspace.ts | ||
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For chatting with others using the framework:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.