Cms: [FR] Integrate Tailwind into CP

[wbrowar]

Description

Tailwind seems like a good match for developers who use Craft and there are many plugins that extend the CP’s look and feel. While you're exploring refactoring the CP for Craft 4, it would be great if Tailwind (or a similar Utility CSS library) could be used as the base for the CP UI.

This way developers could extend that design system to match the look and feel of the CP, while leaving control of the design system to Craft.

I can see uses for this in my own plugins, and the idea of using a utility-based design system alongside custom element index views could be very awesome.

[Anubarak]

Please no utility first css style. I rather like the clean and convenient CSS of the CP. You don't need to understand much and can pretty much copy paste classes with ease.
I don't want to change simple classes from

<div class="field">
    <div class="heading">
    </div>
    <div class=input">
     </div>
</div>

to something hellish as a list of 10 classes each and remember what I need to use for what. If you want to build the CSS with tailwind and keep the clean classes, go for it but please don't use the utility first approach

[wbrowar]

@Anubarak that's a good point that it would cause issues in trying to override existing styles and would have downsides from things, like specificity, if it were used everywhere. Maybe refactoring all of Craft’s UI to use something like Tailwind isn't a good idea.

I still think there's a use case for UI layouts and elements created for plugins and custom modules. There is a SCSS mixins file that helps in this situation, but it requires a build process to integrate the SCSS code into your plugin or module. For plugins I feel like that's fine, but when creating a custom module, it would be a big time saver to have a flexible design system in place that could be used and would stay up to date as Craft’s UI is updated.

[brandonkelly]

We do plan on adding Tailwind, but that doesn’t mean we’ll get rid of our current classes; those can just be redefined as custom utility classes.

[piotrpog]

@brandonkelly Do you plan that for Craft 4 or for some earlier updates?

[brandonkelly]

Probably 3.6

[leevigraham]

Can't wait to see how you handle purgecss and custom modules / plugins 😃

[brandonkelly]

I don’t think we’d use purgecss considering we don’t know which classes plugins may need. We could potentially come up with a way for individual projects to do their own asset packaging though, and provide alternative CSS/JS files for the control panel.