Atomic Design for React components using Tailwind classes
I was thinking about basing my app's components on atomic design since I like the approach: "a component defines how it can look, the implementation just says where it goes".
This basically means:
- CSS Props like "margin", "position" and "z-index" may not be defined on a component's root level element within that component itself, but instead in the implementation
- Other props like "color" are defined within the component and can be made changeable by custom props like e.g. "variant"
This sounds nice but is hard to enforce since I usually style my components by simply passing "classNames" to it containing Tailwind classes, and I could potentially also pass classNames like "bg-red-500" which is something I don't want.
Is there any common way to do this easily?
Probably the way with the best DX would be a VS Code extension like "Tailwind CSS IntelliSense" which gives us auto-complete in the classNames prop of a component.
Apart from that I thought about writing a custom type for my components, based on
Did anyone of you ever waste a thought on this or has an opinion on the whole thing?
Good idea? Bad idea? Good idea but too hard to make accessible?
This basically means:
- CSS Props like "margin", "position" and "z-index" may not be defined on a component's root level element within that component itself, but instead in the implementation
- Other props like "color" are defined within the component and can be made changeable by custom props like e.g. "variant"
This sounds nice but is hard to enforce since I usually style my components by simply passing "classNames" to it containing Tailwind classes, and I could potentially also pass classNames like "bg-red-500" which is something I don't want.
Is there any common way to do this easily?
Probably the way with the best DX would be a VS Code extension like "Tailwind CSS IntelliSense" which gives us auto-complete in the classNames prop of a component.
Apart from that I thought about writing a custom type for my components, based on
React.FCm-1mx-2 -ml-[calc(100px-2rem)]Did anyone of you ever waste a thought on this or has an opinion on the whole thing?
Good idea? Bad idea? Good idea but too hard to make accessible?
