Replies: 2 comments 3 replies
-
|
There is no option to keep CSS nesting in the production output. However, you could disable optimization altogether (Vite, PostCSS), and then run your own optimization. |
Beta Was this translation helpful? Give feedback.
-
|
Would actually increase the file size because Tailwind uses nesting very aggressively in it's own output. Take this class for example:
This is the CSS we generate: .data-enabled\:active\:focus\:first\:bg-red-500 {
&[data-enabled] {
&:active {
&:focus {
&:first-child {
background-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
}
}
}
}
}After processing the nesting it turns into this: .data-enabled\:active\:focus\:first\:bg-red-500[data-enabled]:active:focus:first-child {
background-color: var(--color-red-500, oklch(63.7% .237 25.331));
}So it would probably reduce the file size for any of your own custom CSS but it would be way bigger overall because of all the extra stuff in there from Tailwind's own nesting. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
As it is mentionned in the documentation about compatibility:
CanIUse mentionned it is OK for about 92% of browser it it is fine for my usage, and maybe other.
Beta Was this translation helpful? Give feedback.
All reactions