Hacker News Reader

Comment by tomschwiha | Hacker News Reader

Is there any good tutorial/ guide available with best practices for tailwind?

There's a couple of good playlists by Adam himself on Youtube that are very useful in seeing how Tailwind should be used: https://www.youtube.com/@AdamWathan/playlists

Will have a look. Thank you.

The docs are great and they also happen to be a kind of "CSS: The Good Parts." What sort of questions do you need answered? For the most part you just make components and put styles on them.

Right now I have the feeling when using tailwind the html code becomes unreadable cluttered with classes. So abstraction of components is king? Maybe I'm just overthinking it.

Yeah, I would say using components (rather than classes with @apply, as another commenter said) is the main thing. The class clutter is then contained to that component. You make some components and then in most of your code there are only a few classes here and there.

Here's an example from my main work app:

Components: https://github.com/oxidecomputer/console/blob/da07ce01a8fb7f...

Clean call site: https://github.com/oxidecomputer/console/blob/da07ce01a8fb7f...

Either your html becomes verbose or your css becomes inscrutable. Pick your poison.

I thought styled components solved this issue pretty well. Your markup (JSX) is composable, and so is its styling (styled components with raw CSS or object syntax).

Unfortunately, many developers using styled components don't realize the power of their composability, and end up just writing one level deep for each component. But in fact you can wrap styled components and compose them together...

Styled components are no different than Tailwind in this regard, and this is precisely how Tailwind is meant to be used. You define a component and use that.

Do not use @apply. Embrace the chaos.

buildui.com has an excellent tutorial

Reply on news.ycombinator.com