Tailwind integration

Systhema ships its utilities, token variables and component CSS as a Tailwind CSS v4 entry. Import it once in your global stylesheet; this page covers the import, the Tailwind defaults it changes, and the legacy config wrapper.

Tailwind v4Link to this section

Import Systhema's Tailwind layer directly in your global stylesheet (app/globals.css or src/styles/globals.css):

@import '@systhemaui/core/tailwind';

This pulls in:

• Tailwind v4's CSS-based configuration.
• All Systhema design-token-derived utilities and CSS variables.
• The component CSS of every block enabled in your config.

No separate tailwind.config.* file is required.

Where Systhema's rules sit relative to Tailwind's utilities and your own CSS is described on Cascade layers. Which component CSS families are emitted is set by the blocks option.

Theme defaultsLink to this section

The entry keeps Tailwind's utilities but changes some of the theme values behind them. It sets these variables in its @theme:

What that means in your markup:

• Spacing is a 4px grid in pixels. --spacing: 4px makes p-4 16px and gap-6 24px, the same steps as Tailwind's default, but in px, so they do not follow the root font size.
• Font sizes, letter spacing and radii are in pixels. text-xs to text-9xl keep Tailwind's steps (12px to 128px); tracking-* and rounded-* likewise. For content text, prefer the token text styles.
• Breakpoints come from your tokens. Tailwind's default breakpoints are removed and the breakpoint variants are the token breakpoints: with the default tokens md: from 640px, lg: from 1192px, xl: from 1366px, 2xl: from 1728px and 3xl: from 2048px. sm: starts at 0px, so it applies everywhere. See Breakpoints and ranges.
• Tailwind's container scale is removed. max-w-sm to max-w-7xl, w-md and the named container query variants (@md:) produce nothing. Use max-w-container, an arbitrary value such as max-w-[640px], or max-w-prose.
• container is Systhema's. Tailwind's container utility is switched off, and the class centers content at the token container width. See Container.

const sizes = ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl']
const radii = ['rounded-xs', 'rounded-sm', 'rounded-md', 'rounded-lg', 'rounded-xl', 'rounded-2xl', 'rounded-3xl']

export default function Demo() {
  return (
    <div className="flex w-full flex-col gap-8">
      <div className="flex flex-col gap-2">
        {sizes.map((size) => (
          <div key={size} className="flex items-baseline gap-4">
            <span className="w-20 shrink-0 font-mono text-xs opacity-60">{size}</span>
            <span className={size}>Tokens to pixels</span>
          </div>
        ))}
      </div>
      <div className="flex flex-wrap gap-4">
        {radii.map((radius) => (
          <div key={radius} className="flex flex-col items-center gap-1">
            <div className={`bg-theme-500 size-14 ${radius}`} />
            <span className="font-mono text-[10px] opacity-60">{radius}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

Legacy tailwind.configLink to this section

For projects requiring a traditional Tailwind config, wrap it with withSysthema(). Use this only if you really need it.

import type { Config } from 'tailwindcss'
import { withSysthema } from '@systhemaui/core'

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: { extend: {} },
  plugins: [],
}

export default withSysthema(config)

const { withSysthema } = require('@systhemaui/core')

/** @type {import('tailwindcss').Config} */
const config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: { extend: {} },
  plugins: [],
}

module.exports = withSysthema(config)

withSysthema():

• Deep merges your config with Systhema's defaults.
• Adds design-token-derived colors, fonts, and screens.
• Includes all Systhema plugins and utilities.
• Sets sensible content paths for React, Next, and Payload packages.

Reference the legacy config from CSS:

@import 'tailwindcss' source(none);
@config '../../tailwind.config.js';

Email templatesLink to this section

For React Email templates, @systhemaui/core exports a separate config with email-safe utilities:

import { getEmailTailwindConfig } from '@systhemaui/core'

const tailwindConfig = getEmailTailwindConfig()

RelatedLink to this section

• Cascade layers
• Component CSS blocks
• Installation