Atomic CSS in the style attribute.

Type-safe static styles with theming, responsive variant support, and no bundler integration.

CSS-in-JS solutions that rely on style injection won't be recommended by the React team going forward, and instead they suggest the following:

In other words—_write CSS like we used to_. But what about the benefits that CSS-in-JS gave us?

There are CSS-in-JS solutions that extract static rules from your template files into external .css files, however, these approaches often require bundler integration and come with build-time limitations.

The learning curve can be intimidating but developers invest regardless so they can have type errors and intellisense for their design system tokens as well as style deduping, critical path CSS, scoping, and composition.

Tailwind CSS adopts a different strategy to achieve these goals:

- We can style inline to prototype quickly

- Editor extensions for intellisense based on your theme

- Statically generated styles with a simple CLI script, no bundler integration

- Atomic CSS so styles have a cap on how large they can grow

On the flip side:

- Removing values from your theme won't flag redundant references

- We must memorise Tailwind's custom class names which spawns things like the Tailwind Cheatsheet

- Specificity issues when composing unless we use third-party packages like tailwind-merge

- Styling inline can be unpleasant to maintain, resulting in third-party packages like cva

- Classes must exist as complete unbroken strings

- Debugging in dev tools is tricky because styles are spread across atomic classes

Tokenami aims to improve some of these areas by using CSS variables instead of CSS properties in the style attribute, and bringing all necessary tools under one roof. It features:

- Simple naming convention—use the CSS properties you already know, prefixed with double-dash

- Smaller stylesheet made possible by atomic CSS variables

- Config file for defining your theme

- Feature-rich intellisense when authoring styles

- Fully typed style attribute for ad-hoc styles, including media queries and pseudo-classes/selectors

- A tiny css utility with variants, and responsive variants support

- Seamless composition across component boundaries using the css utility

- Runtime style support e.g. style={{ '--color': props.color }}

- Aliasable properties e.g. style={{ '--p': 4 }} for padding

- Custom selector support enabling sibling or descendant selectors

- Improved debugging experience in dev tools

- Statically generated styles

- No bundler integration