4 ms·

I have been using tailwind. One thing I've noticed is that it can become unmaintainable compared to styled-components since you just have divs with classes (and

by vsroy 4y ago

I have been using tailwind. One thing I've noticed is that it can become unmaintainable compared to styled-components since you just have divs with classes (and it's hard to read 50 nested divs). Has anyone used something like Tailwind-Styled-Component [1] and found it worthwhile? https://www.npmjs.com/package/tailwind-styled-components https://www.npmjs.com/package/tailwind-styled-components

danielvaughn 4y ago
Curious what counts as unmaintainable for you. The HTML is certainly uglier, but cost-of-copy-paste is very low compared to cost of maintaining abstractions. That for me is the primary value add for Tailwind.
- vsroy 4y ago
  With styled components my react might look like this: ``` <Question> {...} <Footer> < button> { ... } </button> <QuestionBadge> </QuestionBadge> </Footer> </Question> ``` That's easier than ``` <div className = " ... "> { ...} <div> <div> </div> ```
  - babyshake 4y ago
    You can always create static components that render a bunch of divs - for a badge, or a footer, as shown in your example.
  - lights0123 4y ago
    Tailwind specifically recommends creating components with a JS framework that look like the former.
    - ValentineC 4y ago
      Adding on: I'm still trying to grasp Tailwind myself, and I've found this video by one of Tailwind's creators to be quite useful in explaining the above comment. https://www.youtube.com/watch?v=ab8RePo5ZYU https://www.youtube.com/watch?v=ab8RePo5ZYU
    - MonaroVXR 4y ago
      Can you point the right direction? Because I didn't read this from me the documents. Maybe it's in the beta docs?
      - lights0123 4y ago
        Here's in v3, but it was added in the v1 docs: https://tailwindcss.com/docs/reusing-styles#extracting-components-and-partials https://tailwindcss.com/docs/reusing-styles#extracting-compo...
  - danielvaughn 4y ago
    A side project I've been trying to find time to work on - a Tailwind/Styled components fusion. So imagine just being able to do this: <Question mt0 textCenter p8={extraPadding} p2={!extraPadding} /> Or you could have another variation, but optimization is more difficult: <Question mt={0} text="center" p={extraPadding ? 8 : 2} />
    - akvadrako 4y ago
      So https://windicss.org/posts/attributify.html https://windicss.org/posts/attributify.html ? <button bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" text="sm white" font="mono light" p="y-2 x-4" border="2 rounded blue-200" >
vilos1611 4y ago
I've been using twin.macro on a side-project of mine, and have really enjoyed it: https://github.com/ben-rogerson/twin.macro https://github.com/ben-rogerson/twin.macro I especially like how easy it is to fall back onto ordinary Styled Components if I'm trying to implement things more specific than what tailwind can handle. Here's a sample of what I've implemented with twin.macro: https://grueplan.com https://grueplan.com
- bryanrasmussen 4y ago
  hmm, maybe HN related problems? Application error: a client-side exception has occurred (see the browser console for more information), some nextJS issue, so maybe server side?
chrischen 4y ago
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.
- MonaroVXR 4y ago
  But it's still unreadable, whatever someone's definition may be. I have my Tailwind css in a global.css file. That's my solution for making it readable.
mcntsh 4y ago
I made my own library to handle Tailwind, and it works pretty well with React: https://github.com/mcntsh/use-utility-classes https://github.com/mcntsh/use-utility-classes
akvadrako 4y ago
I find attributify mode helps a lot with readability: https://windicss.org/posts/attributify.html https://windicss.org/posts/attributify.html
MonaroVXR 4y ago
I was trying to not add much Tailwind css classes for my Navigation bar and keep the semantics, but its kinda difficult for a beginner like me.

by vsroy 4y ago

danielvaughn 4y ago

Curious what counts as unmaintainable for you. The HTML is certainly uglier, but cost-of-copy-paste is very low compared to cost of maintaining abstractions. That for me is the primary value add for Tailwind.

vsroy 4y ago
With styled components my react might look like this: ``` <Question> {...} <Footer> < button> { ... } </button> <QuestionBadge> </QuestionBadge> </Footer> </Question> ``` That's easier than ``` <div className = " ... "> { ...} <div> <div> </div> ```
- babyshake 4y ago
  You can always create static components that render a bunch of divs - for a badge, or a footer, as shown in your example.
- lights0123 4y ago
  Tailwind specifically recommends creating components with a JS framework that look like the former.
  - ValentineC 4y ago
    Adding on: I'm still trying to grasp Tailwind myself, and I've found this video by one of Tailwind's creators to be quite useful in explaining the above comment. https://www.youtube.com/watch?v=ab8RePo5ZYU https://www.youtube.com/watch?v=ab8RePo5ZYU
  - MonaroVXR 4y ago
    Can you point the right direction? Because I didn't read this from me the documents. Maybe it's in the beta docs?
    - lights0123 4y ago
      Here's in v3, but it was added in the v1 docs: https://tailwindcss.com/docs/reusing-styles#extracting-components-and-partials https://tailwindcss.com/docs/reusing-styles#extracting-compo...
- danielvaughn 4y ago
  A side project I've been trying to find time to work on - a Tailwind/Styled components fusion. So imagine just being able to do this: <Question mt0 textCenter p8={extraPadding} p2={!extraPadding} /> Or you could have another variation, but optimization is more difficult: <Question mt={0} text="center" p={extraPadding ? 8 : 2} />
  - akvadrako 4y ago
    So https://windicss.org/posts/attributify.html https://windicss.org/posts/attributify.html ? <button bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" text="sm white" font="mono light" p="y-2 x-4" border="2 rounded blue-200" >

vilos1611 4y ago

I've been using twin.macro on a side-project of mine, and have really enjoyed it: https://github.com/ben-rogerson/twin.macro https://github.com/ben-rogerson/twin.macro I especially like how easy it is to fall back onto ordinary Styled Components if I'm trying to implement things more specific than what tailwind can handle. Here's a sample of what I've implemented with twin.macro: https://grueplan.com https://grueplan.com

bryanrasmussen 4y ago
hmm, maybe HN related problems? Application error: a client-side exception has occurred (see the browser console for more information), some nextJS issue, so maybe server side?

chrischen 4y ago

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.

MonaroVXR 4y ago
But it's still unreadable, whatever someone's definition may be. I have my Tailwind css in a global.css file. That's my solution for making it readable.

mcntsh 4y ago

I made my own library to handle Tailwind, and it works pretty well with React: https://github.com/mcntsh/use-utility-classes https://github.com/mcntsh/use-utility-classes

akvadrako 4y ago

I find attributify mode helps a lot with readability: https://windicss.org/posts/attributify.html https://windicss.org/posts/attributify.html

MonaroVXR 4y ago

I was trying to not add much Tailwind css classes for my Navigation bar and keep the semantics, but its kinda difficult for a beginner like me.