3 ms·
But this isn't much different than: <Button class=`border text-gray ${override}`/> <CalloutButton /> extends <Button override="text-blue" /> I'd argue you ha
by andiareso 4y ago
But this isn't much different than:
<Button class=`border text-gray ${override}`/>
<CalloutButton /> extends <Button override="text-blue" />
I'd argue you have less markup to write overall if you are modularizing component logic/styling
- deleted 4y ago[deleted]
- LouisSayers 4y agoAnd what about your :hover, ::before etc, where do you put those? (genuinely curious)
- timdorr 4y agoThose have utility classes: https://tailwindcss.com/docs/hover-focus-and-other-states https://tailwindcss.com/docs/hover-focus-and-other-states
- seek 4y agoTailwind supports those https://tailwindcss.com/docs/hover-focus-and-other-states#hover-focus-and-active https://tailwindcss.com/docs/hover-focus-and-other-states#ho... https://tailwindcss.com/docs/hover-focus-and-other-states#before-and-after https://tailwindcss.com/docs/hover-focus-and-other-states#be...
- meowtimemania 4y agoOne gripe I have with tailwind, is overriding styles is difficult. The .text-blue style will only override .text-gray if it is declared later in the css document. for example if the corresponding css file is this: .text-blue { color: blue; } .text-gray { color: gray; } Then in your above example, both Button and CalloutButton will have gray text because .test-gray has higher specificity than .text-blue
- xigoi 4y agoThe difference is that your website will be much larger and won't work without JavaScript.