[andirk]

The whole "name it what its purpose is rather than what it does" like "alert-danger" rather than "giant-red-text" seems to have been thrown out with a lot of Tailwind. It prefers chaos but chaos is so much easier to adjust outliers. Those 2 divs have double the spacing between them? Just take the mx-5 off of one! It's hideous but so easy. Constant find/replace all.

[LudwigNagasena]

You can add your `alert-danger` and whatever you need in `tailwind.config.js` or even directly in your root css file using CSS variables.

[_heimdall]

I've tried building design systems into Tailwind config a few times and found it to lose a lot of the potential value of tailwind.

Markup is no longer portable without bringing the config with it and devs still need to learn the custom styles and classes we defined, meaning Tailwind knowledge alone doesn't get you up to speed right away.

[gedy]

To your example, recent Bootstrap has a mix of component and utility classes that lets you do both "alert-danger mx-0" or whatever.

I also avoids the giant size of Tailwind classes that requires that elaborate build/reduction process. You can just include Bootstrap from a CDN or whatever.

[arcanemachiner]

There's also daisyUI, which is sort of like Tailwind + Bootstrap: component-based, but made with Tailwind. Cuts down on the tag soup pretty nicely.

[gedy]

Yes DaisyUI is nice. Ironically, it convinced us not to move from Bootstrap, because we realized its components were almost 1:1 with Bootstrap. And that we actually don't want the infinite styling options that Tailwind offers, so that devs mostly use design system components. At that point, who cares where/what the CSS is?

[quickthrower2]

flex and gap-5 are king

[andirk]

Yes! A few of the many, many, many CSS definitions to get us where `<table>` got us in 1996. See ya later colspan, rowspan.