The Canvas UI and CLI both compile Tailwind CSS with tailwindcss-in-browser, but they do not use the same compileCss() options.

The UI passes unlayeredUtilities so generated display utilities can override the System module's unlayered .hidden class. This was implemented in #3555376: Avoid unintended CSS precendence due to conflicting and unlayered "hidden" class name, but we never added it to the CLI build.

This mismatch existed before the recently landed #3588661: Make CLI builds use shared Vite infrastructure and can cause responsive display utilities such as md:block to fail to override hidden in CSS built by the CLI.

Proposed resolution

Update the UI Tailwind compiler hook and the CLI Tailwind build utility to import a shared constant. Update the CLI compileCss() call to pass { unlayeredUtilities: UNLAYERED_DISPLAY_UTILITIES }, matching the existing UI behavior, and add focused test coverage for the CLI call.

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.

Issue fork canvas-3589850

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

balintbrews created an issue. See original summary.

balintbrews’s picture

Assigned: balintbrews » Unassigned
Status: Active » Needs review

  • balintbrews committed d98aa10b on 1.x
    fix(CLI Tool): #3589850 Share Tailwind CSS utility layering...
balintbrews’s picture

Status: Needs review » Fixed

Published @drupal-canvas/cli@0.16.1.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.