3 ms·
With styled components my react might look like this: ``` <Question> {...} <Footer> < button> { ... } </button> <QuestionBadge> </QuestionBadge>
by 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 agoYou can always create static components that render a bunch of divs - for a badge, or a footer, as shown in your example.
- lights0123 4y agoTailwind specifically recommends creating components with a JS framework that look like the former.
- ValentineC 4y agoAdding 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 agoCan you point the right direction? Because I didn't read this from me the documents. Maybe it's in the beta docs?
- lights0123 4y agoHere'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 agoA 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 agoSo 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" >