Skip to content

Improve upgrade guide #2096

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 19, 2025
Merged

Improve upgrade guide #2096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aa22407
Improve upgrade guide
philipp-spiess Feb 17, 2025
a81ccfb
Updates
philipp-spiess Feb 17, 2025
bd8f029
mb
philipp-spiess Feb 17, 2025
b0fb97e
mb
philipp-spiess Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/docs/functions-and-directives.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ Use the `@config` directive to load a legacy JavaScript-based configuration file
@config "../../tailwind.config.js";
```

The `corePlugins`, `safelist` and `separator` options from the JavaScript-based config are not supported in v4.0.
The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0.

<h3 id="plugin-directive">@plugin</h3>

Expand Down
24 changes: 23 additions & 1 deletion src/docs/upgrade-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -595,7 +595,7 @@ The generated CSS variables _will_ include a prefix to avoid conflicts with any

### Adding custom utilities

In v3, any custom classes you defined within `@layer utilities` would get picked up by Tailwind as a true utility class and would automatically work with variants like `hover`, `focus`, or `lg`.
In v3, any custom classes you defined within `@layer utilities` or `@layer components` would get picked up by Tailwind as a true utility class and would automatically work with variants like `hover`, `focus`, or `lg` with the difference being that `@layer components` would always come first in the generated stylesheet.

In v4 we are using native cascade layers and no longer hijacking the `@layer` at-rule, so we've introduced the `@utility` API as a replacement:

Expand All @@ -613,6 +613,26 @@ In v4 we are using native cascade layers and no longer hijacking the `@layer` at
}
```

Custom utilities are now also sorted based on the amount of properties they define. This means that component utilities like this `.btn` can be overwritten by other Tailwind utilities without additional configuration:

```css
/* [!code filename:CSS] */
/* [!code --:8] */
@layer components {
.btn {
border-radius: 0.5rem;
padding: 0.5rem 1rem;
background-color: ButtonFace;
}
}
/* [!code ++:6] */
@utility btn {
border-radius: 0.5rem;
padding: 0.5rem 1rem;
background-color: ButtonFace;
}
```

Learn more about registering custom utilities in the [adding custom utilities documentation](/docs/adding-custom-styles#adding-custom-utilities).

### Variant stacking order
Expand Down Expand Up @@ -725,6 +745,8 @@ If you still need to use a JavaScript config file, you can load it explicitly us
@config "../../tailwind.config.js";
```

The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0.

### Theme values in JavaScript

In v3 we exported a `resolveConfig` function that you could use to turn your JavaScript-based config into a flat object that you could use in your other JavaScript.
Expand Down