3 ms·

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

dcre 3y ago
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.
- tomschwiha 3y ago
  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.
  - dcre 3y ago
    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/da07ce01a8fb7fe69c3ed35733a7e7fb2f268ba0/app/components/Sidebar.tsx https://github.com/oxidecomputer/console/blob/da07ce01a8fb7f... Clean call site: https://github.com/oxidecomputer/console/blob/da07ce01a8fb7fe69c3ed35733a7e7fb2f268ba0/app/layouts/ProjectLayout.tsx https://github.com/oxidecomputer/console/blob/da07ce01a8fb7f...
  - math_dandy 3y ago
    Either your html becomes verbose or your css becomes inscrutable. Pick your poison.
    - chatmasta 3y ago
      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...
      - dcre 3y ago
        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.
  - deleted 3y ago
    [deleted]
kingofthehill98 3y ago
Do not use @apply. Embrace the chaos.
numbers 3y ago
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 https://www.youtube.com/@AdamWathan/playlists
- tomschwiha 3y ago
  Will have a look. Thank you.
blackhaj7 3y ago
buildui.com has an excellent tutorial

dcre 3y ago

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.

tomschwiha 3y ago
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.
- dcre 3y ago
  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/da07ce01a8fb7fe69c3ed35733a7e7fb2f268ba0/app/components/Sidebar.tsx https://github.com/oxidecomputer/console/blob/da07ce01a8fb7f... Clean call site: https://github.com/oxidecomputer/console/blob/da07ce01a8fb7fe69c3ed35733a7e7fb2f268ba0/app/layouts/ProjectLayout.tsx https://github.com/oxidecomputer/console/blob/da07ce01a8fb7f...
- math_dandy 3y ago
  Either your html becomes verbose or your css becomes inscrutable. Pick your poison.
  - chatmasta 3y ago
    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...
    - dcre 3y ago
      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.
- deleted 3y ago
  [deleted]

kingofthehill98 3y ago

Do not use @apply. Embrace the chaos.

numbers 3y ago

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 https://www.youtube.com/@AdamWathan/playlists

tomschwiha 3y ago
Will have a look. Thank you.

blackhaj7 3y ago

buildui.com has an excellent tutorial