Avoid unintended CSS precendence due to conflicting and unlayered "hidden" class name
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3555376. -->
Reported by: [balintbrews](https://www.drupal.org/user/613760)
Related to !282
>>>
<h3 id="overview">Overview</h3>
<p>Tailwind CSS 4 compiles the CSS with all the rules placed inside cascade layers. When there is other CSS outputted on the same page with unlayered rules, those take precendence, which can cause unintended side effects. One of these side effects are caused by Drupal core's <a href="https://git.drupalcode.org/project/drupal/-/blob/ea75fec9563c807af124acf2d0a3b0950647e205/core/modules/system/css/components/hidden.module.css#L14">System module defining the following rule</a> without a layer:</p>
<pre>.hidden {<br> display: none;<br>}</pre><p>This conflicts with Tailwind's <a href="https://tailwindcss.com/docs/display"><code>hidden</code></a> utility class. They both have the same declaration, so it wouldn't seem like a problem. However, consider the following situation:</p>
<pre><div class="hidden md:block"> … </div> </pre><p>The <code>block</code> utility class is added to set <code>display: block</code> from the medium screen size and up, but the unlayered rule by the System module with the <code>.hidden</code> class will always take precedence.</p>
<h3 id="proposed-resolution">Proposed resolution</h3>
<p>An option to unlayer certain utilities <a href="https://github.com/balintbrews/tailwindcss-in-browser/pull/20">have been introduced in <code>tailwindcss-in-browser</code></a> to solve this. We need to bring in the version that includes that (0.5.0), and pass the following list to the new option:</p>
<pre>[ <br> 'hidden' // In case this is removed or moved to a layer in the System module<br> 'inline',<br> 'block',<br> 'inline-block',<br> 'flow-root',<br> 'flex',<br> 'inline-flex',<br> 'grid',<br> 'inline-grid',<br> 'contents',<br> 'table',<br> 'inline-table',<br> 'table-caption',<br> 'table-cell',<br> 'table-column',<br> 'table-column-group',<br> 'table-footer-group',<br> 'table-header-group',<br> 'table-row-group',<br> 'table-row',<br> 'list-item',<br>]</pre>
issue