Comment by skeptic_ai

You can’t even have dynamic Classes: https://tailwindcss.com/docs/detecting-classes-in-source-fil...

> <div class="text-{{ error ? 'red' : 'green' }}-600"></div>

—- I find it really crazy that they think would be good idea. I wonder how many false positive css stuff is being added given their “trying to match classes”. So if you use random strings like bg-… will add some css. I think it’s ridiculous, but tells that people that use this can’t be very serious about it and won’t work in large projects.

—— > Using multi-cursor editing When duplication is localized to a group of elements in a single file, the easiest way to deal with it is to use multi-cursor editing to quickly select and edit the class list for each element at once

Instead of using a var and reusing, you just use multi cursors. Bad suggestions again.

—-

> If you need to reuse some styles across multiple files, the best strategy is to create a component

But on benefits says

> Your code is more portable — since both the structure and styling live in the same place, you can easily copy and paste entire chunks of UI around, even between different projects.

—-

> Making changes feels safer — adding or removing a utility class to an element only ever affects that element, so you never have to worry about accidentally breaking something another page that's using the same CSS.

CSS in js fixed this long time ago.

—-

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10"> <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" /> <div> <div class="text-xl font-medium text-black dark:text-white">ChitChat</div> <p class="text-gray-500 dark:text-gray-400">You have a new message!</p> </div> </div>

So many classes you need to learn to use it.