Problem/Motivation

In 2.x with tailwindcss_utility_include_cdn, the Tailwind Play CDN loaded on every page with Tailwind classes and compiled whatever it found, so classes changed in the browser's web inspector were styled at once. Site builders use this to try out classes before changing a template or a Layout Builder section.

In 3.0 a page only gets the rules of the classes in its HTML, and the 'build' fallback compiles the missing ones once, on pages that have any. A class added after load is styled only when the page already uses it. CKEditor 5 content is the exception: its observer compiles classes as they change. Markup inserted by AJAX has the same gap, e.g. the Layout Builder preview after editing the Tailwind classes of a section.

Steps to reproduce

  1. Set $settings['tailwindcss_utility_fallback'] = 'build';
  2. On a front-end page, add a class in the web inspector that the page doesn't use elsewhere, e.g. mt-16 or p-[13px].
  3. Nothing changes. The same change in CKEditor 5 content, with tailwindcss_utility_ckeditor5 enabled, is styled.

Proposed resolution

For users with a new permission, pages with the utilities link load the build and compile classes as they change:

  • Generalize the MutationObserver of the CKEditor 5 integration to the whole document. It lives in the module's JavaScript rather than in the bundle from tailwind-build.mjs, since any script defining window.tailwindcssUtilityBuild() can be the bundle.
  • Compile all classes of the page into one stylesheet and disable the served one, so the rules keep Tailwind's order. Appended after the served rules, an added p-4 would override a served md:p-8.
  • Gate it with a permission rather than a setting, so it works on every environment for site builders, and anonymous users never load the build.

While it's on, classes whose rules were overridden at Appearance » Tailwind styles show their compiled rules.

Remaining tasks

  • Decide whether 'cdn' sites get the same, by loading the browser build for these users on every page, Preflight included.

User interface changes

New permission "Compile Tailwind classes live".

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

graber created an issue. See original summary.

graber’s picture

Status: Active » Needs review

  • graber committed 46d06249 on 3.0.x
    Resolve #3636835 "Compile classes added"
    
graber’s picture

Assigned: graber » Unassigned
Status: Needs review » Fixed

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.