Tailwind preset

Map Tailwind utilities to Liquidify's runtime CSS variables.

The token package exports liquidifyPreset, a plain Tailwind preset that maps theme values to Liquidify CSS custom properties. The package does not install Tailwind or register plugins.

import { liquidifyPreset } from "@liquidify/tokens/tailwind-preset"

export default {
  presets: [liquidifyPreset],
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
}

Import the token variables once so the generated utilities have values at runtime:

import "@liquidify/tokens/variables.css"

The preset extends colors, spacing, border radius, font family, and font size. Utilities such as bg-bg-secondary, text-label, rounded-pill, and the preset spacing values resolve through var(--lq-*), so theme and platform scopes continue to work.

Keep the preset as an extension rather than copying its resolved values into a separate theme. That preserves a single token authority and prevents component CSS from drifting away from application utilities.

Tailwind preset

Map Tailwind utilities to Liquidify's runtime CSS variables.

The token package exports liquidifyPreset, a plain Tailwind preset that maps theme values to Liquidify CSS custom properties. The package does not install Tailwind or register plugins.

import { liquidifyPreset } from "@liquidify/tokens/tailwind-preset"

export default {
  presets: [liquidifyPreset],
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
}

Import the token variables once so the generated utilities have values at runtime:

import "@liquidify/tokens/variables.css"