Generate utilities not present in other source files

[dfsoeten]

Context:
I am using a Symfony bundle that implements various UI-level features. The bundle ships with compiled CSS using TailwindCSS v3.4.17. A example template file (simplified) looks like this:

<button class="button button--primary p-2 rounded">
    {{- 'component.button'|trans -}}
</button>

The bundle, for the above example ships with two utilities: p-2 and rounded.

Problem:
When overriding the template above from my bundle, within another project the situation can occur that the same utility is present, e.g.:

{% extends '@MyBundle/component/button.html.twig' %}

<button class="button button--primary p-2 rounded border">
    {{- 'component.button'|trans -}}
</button>

This causes Tailwind to generate p-2 and rounded again, even though only border is needed. Loading duplicate utilities is not only wasteful, but also causes problem with CSS overrides regarding responsive layouts.

Current solution:
To "solve" this, I have removed the content option from my tailwind.config.js, and use the safelist feature to manually generate my utilities. As you can imagine, this becomes hard to maintain and very unwieldy pretty fast.

The tailwind.config.js from my project (that uses the bundle I described above), looks like this:

/* eslint-disable */
module.exports = {
    presets: [
        require('@MyBundle/tailwind')
    ],
    safelist: [
        /* 50 utilities here... */
    ],
}

The @MyBundle/tailwind refers the bundle's TailwindCSS config, with many theme extensions for colors, fonts, borders and shadows.

Prefered solution:
How would I go about writing custom extraction logic, preferably by utilising Tailwind's internals, to improve on the above? I would like to prevent writing my own regexes etc if I can help it. 🙂

Explored alternatives:
I have tried to completely overwrite the CSS coming from my bundle, however this has many more unforseen side effects and is therefore unpreferable over safelist'ing 50+ utilities.

Any help would be greatly appriciated! 👍

[wongjn]

I would recommend not using the bundle's compiled CSS at all if possible. Consider compiling all the CSS in your own project. This ensures no duplication and that all the rules are in the right order.

Even better if the bundle shares its own tailwind.config.js that you could then load as a preset. This would then mean you can inherit any custom theme tokens in your project. Ah, I see you're already doing this ^_^

[dfsoeten]

Hi @wongjn, thanks so much for your reply! This is something I have tried in the past, and is the most straight forward solution, I do agree. However, I vaguely remember this having various downsides (for my use case). I'll retry this and report back with exactly the issues I was facing with this approach.

Thanks!

[dfsoeten]

After reattempting exactly what I have done before, and the solution you propose as well @wongjn , it seems to be working just fine. I have no clue why I was under the impression that there's a bunch of drawbacks to this. There's some minor styling issues from a initial observation that I need to debug further, but for the most part it's just fine.

Maybe a fresh look at the problem and some confirmation was all that I needed. 🙂