tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2026-01-25 16:44:12 +00:00

Go to file

Ensure @apply works inside @utility (#14144 )

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

2024-08-09 16:09:25 +02:00

.github

Add integration test setup and tests for the Vite integration (#14089 )

2024-08-02 11:50:49 +02:00

crates

Add @source support (#14078 )

2024-08-07 16:38:44 +02:00

integrations

Vite: Support Tailwind in Vue <style> blocks (#14158 )

2024-08-09 12:41:58 +02:00

packages

Ensure @apply works inside @utility (#14144 )