I've been avoiding Tailwind for a while now, but I've finally given in and used it for the past year. Although I don't personally enjoy it, I can't deny that it's a well-designed tool. I don't mean to imply that Tailwind is inherently bad; on the contrary, it's clearly a well-thought-out tool. I'll try to express my experience as well as look a bit into the future.

Strong sides of Tailwind are:

Inline styling. This is the most important thing that Tailwind has done for mainstream frontend development, popularizing inline markup and styles. These should not be separated into components, and most of the time, you don't need names for classes wrappers, containers, container wrappers, outer wrappers, etc.). You need styles to be applied without having some nonsense name. And you want to see your markup and style at the same time as these are highly coupled.

Speed. It is not a concern for a CSS library. All CSS-only solutions are inherently fast, and I've never encountered performance issues with CSS. I mention it, but I don't think it should be brought up as an advantage, as performance is almost never a consideration for CSS frameworks.

Flexibility, as Tailwind is just a set of utility classnames, it does not prevent you from using any other approach on top of it.

A well-designed set of styles like spacing and colors are so good that it's worth using for your project, and the results are going to be good as well.

Compromises:

Naming. This is the biggest thing I don't like about Tailwind. It is not that they came up with bad names; quite the opposite. Names are really well-thought-out. Often-used classes are super useful, like px, mt, and flex. These are very obvious what they mean. And frankly, every class you use molds into your memory. The hard part is classes you rarely need but do not use often. Like what if I want to set font-size to 11px. While it is font-size in CSS, in Tailwind it is text-[11px]. There is a less obvious example with line-height. In Tailwind it is leading-[20px]. For someone for whom English is not a native language, and I don't think leading is an obvious substitution for line-height. I am not saying these are bad names; I think these are inconvenient for someone who knows CSS.

So this is where Tailwind classes become a kind of a DSL, a naming convention on top of CSS that you need to learn and constantly check for Tailwind classes when you need to. I still do, it still annoys me each time.

Other compromise is readability. And it cannot be solved by just sorting classes to have a specific order. Tailwind is just easy to write, hard to read kind of tools.

Shifted towards developer-designer. It is a good thing for a developer who makes or changes design. There are good typography classes, nice default spacing, and well-thought color palette. However, if you are a frontend developer implementing someone else's design, prepare yourself to use a lot of JIT CSS classes like [25px] because many things won't give you enough information. Like leading-tight is a good choice to have smaller line-height if you need one, but does not help if you need a specific one from design.

Are there alternatives? Better alternatives with atomic CSS - I don't think so. Better approach for your specific case - yes, it's up to you to try and check. I enjoy using ChakraUI for most of the cases, when I need style for a web application. Theo places it to the category of MaterialUI and I don't fully agree with him. He's not completely wrong though. Chakra provides components like MUI, but these are more flexible and more atomic. And I am using it because it gives me style props that theme-ui provides.

These styles are kind of inlined CSS styles, and I don't need to learn a new styling language, that's the thing I love there. Readability is much better as well.

And there is a dozen of useful, reasonable components, easy to style and use further. It does not have complexity of MUI or Antd. The downside is that it does many calculations for each component, and it really feels when you have a list of interactive components. The size of all dependencies also adds up but it is not a real issue for most web applications.

I'm thinking of going with PandaCSS, it feels like it has taken the best bits from Chakra inline styles (actually theme-ui styles). It shouldn't contribute to runtime overhead like Chakra, and therefore may be a good fit for web pages that have size constraints.

Ok, I forgot to mention a thing here - I write mostly in React. So I think Tailwind is going to be a long-living solution for those using server rendering with templates or other non-react approach. For React, PandaCSS seems like a perfect match.