3 ms·

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. Th

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 5y 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 5y 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 5y ago
  Tailwind specifically recommends creating components with a JS framework that look like the former.
  - ValentineC 5y 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 5y 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 5y 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 5y 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 5y 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" >

vsroy 5y 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 5y 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 5y ago
Tailwind specifically recommends creating components with a JS framework that look like the former.
- ValentineC 5y 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 5y 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 5y 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 5y 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 5y 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" >