From what I gather from the docs is that tailwind and atomic css is designed for you to colocate the styling in the html so you can avoid having to create a CSS

From what I gather from the docs is that tailwind and atomic css is designed for you to colocate the styling in the html so you can avoid having to create a CSS version of a component along with an HTML version of a component. For example, in CSS you could create a class for a card called “.card”, but this by itself does not create a card component as you may need card-title within it and card-wrapper on the outside, and various other styles that may seem like they are reusable subcomponents but are not. And it’s a misnomer because it may require a more complicated HTML structure and you cannot just create a div and apply a class “card” and get back the component. Instead in a real app your component has an HTML structure, a css structure, and the reusable package you put it in may be the react component, and not style called “card” that you can use. Tailwind advocates for making your components reusable on this framework level (whether vue or react), rather than at the CSS level. Because even if your make your CSS reusable you still have to recreate the HTML structure. And if you put your HTML in a reusable component and also have a set of reusable styles then you have a Card component concept and a Card style concept that becomes redundant. To address your specific problem, if your code is unreadable due to inline tailwind styles then it’s a sign you should be breaking the HTML into reusable sub components instead.