How to use tailwind css and not get lost in a long list of class names
I was recently playing with Tailwind CSS framework with React. One of the things that bothered me were these long className=”…” declarations. I personally don’t like to have too much style related stuff in my JSX. I think it makes things much less readable and that’s why I’m a fan of Styled Components' way of declaring styles. But I figured out I could try to use Tailwind and just declare these class names in a more readable manner.
Here is an example of how you could implement <Card /> in the most straightforward way:
And here how it can be done with simple utility tool:
Now it’s obviously up to you to decide which version you prefer. Nevertheless, this is definitely another way you can structure your styles.
Another benefit of this approach is composability and conditional styles:
If this cntl template literals thingy looks like alien technology to you, here is how the implementation of this utility looks like:
Here’s some more info about “cntl”:
