Contrib.social

Compile Tailwind CSS globally for code components

Open on Drupal.org →
Created on 31 March 2025, 2 days ago

Overview

The current implementation for building and storing the CSS compiled with Tailwind follows a naïve approach where we build the CSS for every component individually, and store it with the component.

There are two problems with this:

  1. CSS code is duplicated. We planned to fix this by de-duplicating, e.g. as part of the CSS aggregation.
  2. When global CSS, which is our Tailwind config, changes, the CSS compiled for our individual components becomes stale. This was a gap in our plan.

Proposed resolution

I worked on the following proposal with @effulgentsia.

  1. Store only the component-level transpiled CSS in the individual components.
  2. Maintain a list of Tailwind class name candidates in the source_js property of the xb_asset_library entity that is used for global CSS.
    1. Evaluate best format to do so. E.g. single list of strings as a JS comment vs. a structured set of class names coupled with components.
    2. Depending on 2.1., implement garbage collection logic. E.g. in case of a single list of strings, we can re-calculate what class names are unused at cron runs.
  3. Compile CSS on component markup and global CSS changes, store it in the compiled_css property of the Global CSS xb_asset_library entity.

📌 Task
Status

Active

Version

0.0

Component

Page builder

Created by

🇳🇱Netherlands balintbrews Amsterdam, NL

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024