Tailwind CSS v4 theme

The optional @rcarls/rc-theme-tailwind package maps Tailwind CSS v4 theme variables to the RC semantic token layer. It has no Tailwind runtime dependency: import it in a Tailwind application after the @theme block, or use its calm SaaS defaults with the cyan accent fallback.

npm install @rcarls/rc-theme-tailwind

@import '@rcarls/rc-theme-tailwind/theme.css';

The bridge consumes Tailwind's --color-*, --font-*, --text-*, --leading-*, --radius-*, --shadow-*, and --ease-* variables. Override those variables at the theme boundary, or override the resulting --rc-* semantic tokens:

@import '@rcarls/rc-theme-tailwind/bridge.css';
@import '@rcarls/rc-theme-tailwind/components.css';

.app-theme {
  --color-cyan-600: oklch(58% 0.19 220);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --radius-lg: 0.75rem;
}

Native controls and CSS-only recipes are independent opt-ins:

@import '@rcarls/rc-theme-tailwind/defaults.css';
@import '@rcarls/rc-theme-tailwind/bridge.css';
@import '@rcarls/rc-theme-tailwind/native.css';
@import '@rcarls/rc-theme-tailwind/css-components.css';

Apply the rc-theme-tailwind class to a container to scope the theme. Add data-rc-native="off" to opt out a subtree from native control styling.

<div class="rc-theme-tailwind">
  <rc-select>...</rc-select>
  <rc-dialog>...</rc-dialog>
</div>