3 ms·
Thats exactly what this component library does: https://daisyui.com/components/button https://daisyui.com/components/button If you want to do in "raw" tailwind
by supermatt 5y ago
Thats exactly what this component library does: https://daisyui.com/components/button https://daisyui.com/components/button
If you want to do in "raw" tailwind (i.e. without this component library), you can use layers to create your own component classes, e.g.:
@layer components {
.btn {
@apply inline-block px-4 py-3 text-sm font-semibold text-center uppercase transition duration-200 ease-in-out rounded-md cursor-pointer;
}
.btn-primary {
@apply text-white bg-indigo-500 hover:bg-indigo-600;
}
}
- karlerss 5y agoIf it's just one class per property, you could just type out the CSS. Using emmet in IDE is probably faster than finding the tailwind classes with autocomplete.
- automatic6131 5y ago>If it's just one class per property, you could just type out the CSS. You can, but then it rarely happens that you want the CSS to be fixed in that way for all time: the brilliance of tailwind is that you get resposniveness just by adding a few more classes. You cannot do that with inline CSS.
- FractalHQ 5y agoThis is the one pro-tailwind argument I can agree with. Sometimes I’ll use their shorthand md: & sm: in @apply in place of media queries. The advantage is that they remain local to their relevant selectors. Makes me think- all I would really want is to be able to have multiple values in css. Maybe something like . .card { width: 5rem md: 10rem; } Snap… am I on to something?
- Nullabillity 5y agoSass/Scss let you nest media queries inside of selectors years ago.
- FractalHQ 5y agoAnd the result is html and css that is easier to read later. I’m so fast with CSS that Tailwind inevitably slows me down as an app scales.