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
- Set
$settings['tailwindcss_utility_fallback'] = 'build'; - On a front-end page, add a class in the web inspector that the page doesn't use elsewhere, e.g.
mt-16orp-[13px]. - Nothing changes. The same change in CKEditor 5 content, with
tailwindcss_utility_ckeditor5enabled, 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 definingwindow.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-4would override a servedmd: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".
Issue fork tailwindcss_utility-3636835
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
Comment #3
graber commentedComment #5
graber commented