Share Tailwind CSS utility layering configuration between the UI and CLI
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3589850. --> Reported by: [balintbrews](https://www.drupal.org/user/613760) Related to !1102 >>> <p>The Canvas UI and CLI both compile Tailwind CSS with <code>tailwindcss-in-browser</code>, but they do not use the same <code>compileCss()</code> options.</p> <p>The UI passes <code>unlayeredUtilities</code> so generated display utilities can override the System module's unlayered <code>.hidden</code> class. This was implemented in <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3555376" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3555376</a></span>, but we never added it to the CLI build.</p> <p>This mismatch existed before the recently landed <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3588661" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3588661</a></span> and can cause responsive display utilities such as <code>md:block</code> to fail to override <code>hidden</code> in CSS built by the CLI.</p> <h3 id="proposed-resolution">Proposed resolution</h3> <p>Update the UI Tailwind compiler hook and the CLI Tailwind build utility to import a shared constant. Update the CLI <code>compileCss()</code> call to pass <code>{ unlayeredUtilities: UNLAYERED_DISPLAY_UTILITIES }</code>, matching the existing UI behavior, and add focused test coverage for the CLI call.</p> <p>Ideally this would live in a shared package, but the CLI tool already imports things from the UI codebase, and it's outside the scope of this issue to change that.</p>
issue