Other design variables
In a design system, besides colors, typography, and spacing, there are many other important design variables. Let’s look at how to organize these variables to maintain consistency and maintainability in the design system.
Other styles
Responsive breakpoints
Use breakpoint or screens as the top-level directory:
-
breakpoint/sm -
breakpoint/md -
breakpoint/lg -
screens/sm -
screens/md -
screens/lg
border-radius
Use border-radius or radius as the top-level directory:
-
border-radius/sm -
border-radius/md -
border-radius/lg -
radius/sm -
radius/md -
radius/lg
filter:blur()
Use blur as the top-level directory:
blur/smblur/mdblur/lg
You can view the complete list of configuration keys in the Tailwind CSS theme configuration reference .
Component-level variables
For component-level variables, the top-level directory should still follow the principles in this document, but the component name should be used as the second layer, for example:
-
colors/button/DEFAULT -
colors/button/foreground -
colors/button/border -
colors/input/DEFAULT -
colors/card/DEFAULT -
colors/card/foreground -
colors/card/border