Skip to content

Conversation

wotnak
Copy link
Contributor

@wotnak wotnak commented Sep 14, 2025

By default, Tailwind CSS v4 uses CSS layers (theme, base, components, utilities) to group its base styles, but this package currently omits some of them, which causes problems with unlayered styles overriding standard layered styles provided on the site without the use of this module.

This may also interfere with, for example, extending preflight in CSS compiled using this package, since the base unlayered preflight will have more priority than extended layered styles that, by default, should take precedence over the base preflight.

This also affects integrating TailwindCSS based themes with Drupal Canvas.
https://drupal.slack.com/archives/C072JMEPUS1/p1751265628117159
https://drupal.slack.com/archives/C072JMEPUS1/p1757765971384699

This PR loads base TailwindCSS styles in a more standard way using CSS layers, the same as it would be done in a standard project with TailwindCSS styles compiled outside the browser.

@wotnak wotnak changed the title Load base Tailwind styles using standard css layers feat(compileCss): use standard css layers for base tailwind styles Sep 14, 2025
@balintbrews
Copy link
Owner

Fantastic work, thank you so much for this!

@balintbrews balintbrews merged commit ba0c5eb into balintbrews:main Sep 23, 2025
2 checks passed
@wotnak wotnak deleted the layers branch September 30, 2025 18:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants