No description
7d73e51359
This PR fixes an issue where `@apply` was not handled if it was used
inside of `@utility`.
You should now be able to do something like this:
```css
@utility btn {
@apply flex flex-col bg-white p-4 rounded-lg shadow-md;
}
```
If you then use `btn` as a class, the following CSS will be generated:
```css
.btn {
border-radius: var(--radius-lg, .5rem);
background-color: var(--color-white, #fff);
padding: var(--spacing-4, 1rem);
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
flex-direction: column;
display: flex;
}
```
This PR also makes sure that you can use custom `@utility` inside other
`@utility` via `@apply`. E.g.:
```css
@utility foo {
color: red;
}
@utility bar {
color: red;
@apply hover:foo;
}
```
If we detect a circular dependency, then we will throw an error since
circular dependencies are not allowed. E.g.:
```css
@utility foo {
@apply hover:bar;
}
@utility bar {
@apply focus:baz;
}
@utility baz {
@apply dark:foo;
}
```
Regardless of which utility you use, eventually it will apply itself.
Fixes: #14143
|
||
|---|---|---|
| .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.