3 ms·

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 o

• 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]