classnames

> Except that I read that it's great for writing, but a nightmare for reading. This is true at first. I can see it being pretty daunting to come into an existing project and trying to understand the styling of components. Starting from scratch and easing it into an existing project is much easier imo. That's what I did for a personal website. Now that I understand it and have converted the entire website to Tailwind, I don't want to switch to anything else going forward. Here's a Prettier plugin that sort the classes to keep everything consistent across components: https://github.com/tailwindlabs/prettier-plugin-tailwindcss Tailwind combined with classnames (https://github.com/JedWatson/classnames) makes it really easy to have conditional styling based on component state.

Another advantage of camelCase is that classNames (https://github.com/JedWatson/classnames) works without quoting: // you have a variable isFoo <SomeComponent className={classNames({isFoo})} /> is a lot better than: // you have a variable isFoo <SomeComponent className={classNames({'is-foo': isFoo})} /> (also, I personally shorten `classNames` to `cn` because it's so universally useful)

I've been using tailwind for almost a year and I love it. I would not use something else willingly for something new! Its easy/fast to write and in my mind VERY readable, and if you don't know whats what, their docs are really good. And for example in React to build a component with conditional styling I use classNames and use props that correspond to classes. https://github.com/JedWatson/classnames

always hilarious to see the dumb dependencies that these projects have https://github.com/sindresorhus/arrify https://github.com/JedWatson/classnames

Today, I was thinking about this problem. You can separate component Style into - BASE + States classes. classnames[0] can used to use multiple classes, the classes can be activated using component state. This provides a viable solution for Structure & Style. [0] https://github.com/JedWatson/classnames