4 ms·
How does people solve component variants? Say <Button type="success" size="lg"> or <Button type="danger" size="sm"> ? For optimal gzipping (and saner readabili
by morbicer 3y ago
How does people solve component variants? Say <Button type="success" size="lg"> or <Button type="danger" size="sm"> ?
For optimal gzipping (and saner readability) it's recommended to have sorted classes (prettier-plugin-tailwindcss)
But if you want to have some overridability (avoid clashing of p-4 and p-8) you need tailwind-merge.
These two don't play together well
- yurishimo 3y agoYou could use the !important variants for overrides instead of merge. In v4, the tailwind team has already said they want to introduce a solution to solve this problem without tools like tw-merge. I’m guessing it will be some sort of modifier that is placed at a lower specificity if you know that you are authoring something that will be overridden later.
- emi2k01 3y agoI think they most likely will introduce `@layout`s and then your components can be in a different layout than your app code
- Rapzid 3y agoButton.css I find it's often easier/cleaner to just pop a CSS file in for some of these foundational components that have tons of variations. Can use nested CSS now, and the selectors are easier to to work with IMHO and take care of specificity.