StyleX
A styling system built by Meta, MIT licensed: you write styles in JavaScript and a compiler turns them into static atomic CSS. What sets it apart for a design system lives in the types. A component can declare which style properties it accepts, and even the allowed values: a `marginTop` limited to 0, 4, 8 or 16, for instance. Themes and design variables are typed the same way.
Strengths
- A component declares the style values it accepts, and deviations show up in the editor
- Compiled to static atomic CSS, with no runtime styling cost
- Typed themes and design variables, maintained by Meta under MIT
Limitations
- The type constraint has gaps: TypeScript may let extra properties through
- Needs a compiler wired into your build tool, where Tailwind installs in two lines
- Far less present than Tailwind in what agents learned from, so less fluent to generate
Best for
- A React design system started from scratch that wants to bound accepted values component by component