Skip to content

Tailwind: Purge CSS-in-JS config

Lukas Eipert requested to merge tailwind-purge-unused-css into master

What does this MR do and why?

This extends the tailwind_all_the_way.mjs to accept an --only-used flag. Basically tailwind_all_the_way is called in two scenarios:

  1. CI, when building the assets (via yarn run pretailwindcss:build): This now uses --only-used. The css_in_js is reduced to only the classes which are found. This gives us a positive list of things to resolve. The resulting file can be found in the artifacts of the compile-test-assets job.
  2. CI, when doing static analysis to figure out we could hypothetically (via lint:tailwind-utils): This still compiles the full set of utilities in order to compare it to the full list of utilities from gitlab-ui.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

N/A

How to set up and validate locally

In rails console (or via toogle: http://127.0.0.1:3000/rails/features)

Feature.enable(:tailwind_all_the_way)
  1. In your GDK, add: export TAILWIND_ALL_THE_WAY=true to env.runit
  2. Restart webpack / vite: gdk restart webpack / gdk restart vite
  3. Visit any page. The page should look visually alright and a CSS file named assets/tailwind_all_the_way-[hash].css should be loaded
Edited by Lukas Eipert

Merge request reports