tailwind-stylex

Use Tailwind’s default design tokens directly in StyleX. Get typed, autocomplete-friendly constants with no package-specific config, scanning, or generation.

Install

pnpm add tailwind-stylex @stylexjs/stylex

Configure your StyleX compiler to process tailwind-stylex. Skip this step if your integration already processes direct dependencies.

With @stylexjs/unplugin:

stylex({
  externalPackages: ["tailwind-stylex"],
});

With @stylexjs/postcss-plugin, add the token module when you set a custom include list:

{
  include: [
    "src/**/*.{js,jsx,ts,tsx}",
    "node_modules/tailwind-stylex/tokens.stylex.js",
  ],
}

Use

Import the tokens you need and use them in stylex.create:

import * as stylex from "@stylexjs/stylex";
import { colors, containers, fontSizes, radii, spacing } from "tailwind-stylex/tokens.stylex";

const styles = stylex.create({
  card: {
    backgroundColor: colors.stone100,
    borderRadius: radii.lg,
    color: colors.stone900,
    padding: spacing[4],
  },
});

Use bracket notation for numeric Tailwind names:

const styles = stylex.create({
  hero: {
    fontSize: fontSizes["2xl"],
    maxWidth: containers["7xl"],
    padding: spacing[8],
  },
});

Available Tokens

Category	Exports
Colors	colors
Layout	spacing, breakpoints, mediaQueries, containers, aspectRatios, maxWidths
Typography	fonts, fontSizes, fontSizeLineHeights, fontWeights, letterSpacing, lineHeights
Surfaces	radii, shadows, insetShadows, dropShadows, textShadows, blurs
Motion	easings, animations, perspectives
Defaults	defaults

Your editor autocompletes every token and shows its exact value.

License

MIT