#Tailwind CSS

Reuse Leaf UI colors, radii and spacing in Tailwind.

#Quick setup

For a project with Tailwind installed, choose the configuration for your version. Versions 3.x and 4.x are supported; upgrade first if you use 2.x or earlier.

#Tailwind CSS 4

Add one import to your CSS entry:

@import 'tailwindcss';
@import '@ifhover/leaf-ui/tailwind.css';

#Tailwind CSS 3

Add the preset and adjust content to match your source directories:

const leafPreset = require('@ifhover/leaf-ui/tailwind').default;

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  presets: [leafPreset],
};

Keep the Tailwind 3 directives in your CSS entry:

@tailwind base;
@tailwind components;
@tailwind utilities;

For an existing configuration, append the preset and keep your source paths and plugins.

#Examples

#Basic usage

After setup, use leaf- names in utilities to share styles with components:

import { Flex } from '@ifhover/leaf-ui';

export function TailwindBasic() {
  return (
    <Flex
      direction="column"
      gap="sm"
      className="rounded-leaf border border-leaf-border bg-leaf-surface p-leaf-md font-leaf text-leaf"
    >
      <p className="font-leaf-medium text-leaf-primary">Reuse your theme styles</p>
      <p className="text-leaf-muted">Share colors, radii and spacing with components.</p>
    </Flex>
  );
}

bg-leaf-surface sets the background, p-leaf-md sets padding, and rounded-leaf sets the radius. Standard Tailwind utilities and variants such as hover: and md: still work.

#Follow the theme

Utilities inside ConfigProvider follow its regional theme. Turn on dark mode to see the panel and button change together:

import { Button, ConfigProvider, Flex, Switch } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TailwindTheme() {
  const [dark, setDark] = useState(false);

  return (
    <Flex direction="column" gap="md">
      <Switch checked={dark} onChange={(event) => setDark(event.target.checked)}>
        Dark mode
      </Switch>
      <ConfigProvider theme={{ primaryColor: '#7654c6', appearance: dark ? 'dark' : 'light' }}>
        <Flex
          direction="column"
          align="start"
          gap="md"
          className="rounded-leaf border border-leaf-border bg-leaf-surface p-leaf-md font-leaf text-leaf"
        >
          <p className="text-leaf-primary">Utilities and components share a theme</p>
          <p className="text-leaf-muted">Backgrounds, text and borders change together.</p>
          <Button>Leaf UI button</Button>
        </Flex>
      </ConfigProvider>
    </Flex>
  );
}

Backgrounds, text and borders read the current region's variables without extra dark: classes. Color and density changes do not require rebuilding Tailwind. See Theming for more options.

#Common design variables

Both versions use the same utility names and extend the theme while keeping Tailwind defaults.

Color names also work with border-*, ring-*, fill-* and similar utilities. Type size utilities include the theme line height.

#Usage tips

• Opacity: Tailwind 4 supports bg-leaf-primary/50. In Tailwind 3, these colors do not support /50, bg-opacity-* or text-opacity-*; define translucent colors in application CSS.
• Source scanning: Write complete class names such as bg-leaf-primary instead of constructing bg-leaf-${color}.
• Base styles: A CSS-only page with no Leaf UI component imports also needs @ifhover/leaf-ui/styles.css.
• Breakpoints: sm: and md: use your Tailwind configuration, independently of ConfigProvider breakpoints. Follow Tailwind 4's official browser support requirements.
• Regions and overlays: Custom Portal content needs the intended theme scope too. Leaf UI overlays synchronize themes automatically. Configure component-specific variables through ConfigProvider.