Layers are missing from Tailwind-compiled CSS, @import at-rules in global CSS break compilation
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3510433. --> Reported by: [lauriii](https://www.drupal.org/user/1078742) Related to !124 >>> <h3 id="overview">Overview</h3> <p>@wotnak in <a href="https://github.com/balintbrews/tailwindcss-in-browser/pull/17"><code>tailwindcss-in-browser</code>#17</a>:</p> <blockquote><p>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.</p> <p>This may also interfere with, for example, <a href="https://tailwindcss.com/docs/preflight#extending-preflight">extending preflight</a> 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.</p> <p>This also affects integrating TailwindCSS based themes with Drupal Canvas.<br> <a href="https://drupal.slack.com/archives/C072JMEPUS1/p1751265628117159">https://drupal.slack.com/archives/C072JMEPUS1/p1751265628117159</a><br> <a href="https://drupal.slack.com/archives/C072JMEPUS1/p1757765971384699">https://drupal.slack.com/archives/C072JMEPUS1/p1757765971384699</a></p></blockquote> <p>There's also the following error if you try to import Tailwind:</p> <p><img src="https://www.drupal.org/files/issues/2025-03-01/Screenshot%202025-03-01%20at%208.18.41%E2%80%AFAM.png" alt=""></p> <h3 id="proposed-resolution">Proposed resolution</h3> <p>Output layers and make sure (unnecessary) import at-rules don't cause errors.</p>
issue