---
title: "Tailwind integration"
description: "Import Systhema's Tailwind v4 entry, know which Tailwind defaults it changes, or wrap a legacy tailwind.config."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/next/styling/tailwind
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/next/llms.txt
---
> This page isn't translated yet. Showing English.


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 v4

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

```css title="app/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](https://docs.systhema.app/ar/next/styling/cascade-layers.md). Which component CSS families are emitted is set by the [`blocks`](https://docs.systhema.app/ar/next/styling/blocks.md) option.

## Theme defaults

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

<!-- generated:utilities theme-defaults -->

| Variable                   | Value                |
| -------------------------- | -------------------- |
| `--breakpoint-*`           | `initial`            |
| `--container-*`            | `initial`            |
| `--spacing`                | `4px`                |
| `--text-xs`                | `12px`               |
| `--text-xs--line-height`   | `calc(1 / 0.75)`     |
| `--text-sm`                | `14px`               |
| `--text-sm--line-height`   | `calc(1.25 / 0.875)` |
| `--text-base`              | `16px`               |
| `--text-base--line-height` | `calc(1.5 / 1)`      |
| `--text-lg`                | `18px`               |
| `--text-lg--line-height`   | `calc(1.75 / 1.125)` |
| `--text-xl`                | `20px`               |
| `--text-xl--line-height`   | `calc(1.75 / 1.25)`  |
| `--text-2xl`               | `24px`               |
| `--text-2xl--line-height`  | `calc(2 / 1.5)`      |
| `--text-3xl`               | `30px`               |
| `--text-3xl--line-height`  | `calc(2.25 / 1.875)` |
| `--text-4xl`               | `36px`               |
| `--text-4xl--line-height`  | `calc(2.5 / 2.25)`   |
| `--text-5xl`               | `48px`               |
| `--text-5xl--line-height`  | `1`                  |
| `--text-6xl`               | `60px`               |
| `--text-6xl--line-height`  | `1`                  |
| `--text-7xl`               | `72px`               |
| `--text-7xl--line-height`  | `1`                  |
| `--text-8xl`               | `96px`               |
| `--text-8xl--line-height`  | `1`                  |
| `--text-9xl`               | `128px`              |
| `--text-9xl--line-height`  | `1`                  |
| `--tracking-tighter`       | `-0.8px`             |
| `--tracking-tight`         | `-0.4px`             |
| `--tracking-normal`        | `0px`                |
| `--tracking-wide`          | `0.4px`              |
| `--tracking-wider`         | `0.8px`              |
| `--tracking-widest`        | `1.6px`              |
| `--radius-xs`              | `2px`                |
| `--radius-sm`              | `4px`                |
| `--radius-md`              | `6px`                |
| `--radius-lg`              | `8px`                |
| `--radius-xl`              | `12px`               |
| `--radius-2xl`             | `16px`               |
| `--radius-3xl`             | `24px`               |
| `--radius-4xl`             | `32px`               |

<!-- /generated -->

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](https://docs.systhema.app/ar/next/styling/typography.md).
- **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](https://docs.systhema.app/ar/next/styling/breakpoints.md).
- **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`](https://docs.systhema.app/ar/next/styling/container.md), 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](https://docs.systhema.app/ar/next/styling/container.md).

```tsx preview title="Type and radius scales"
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.config

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

```ts title="tailwind.config.ts"
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)
```

```js title="tailwind.config.js"
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:

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

> [!NOTE]
> This `withSysthema()` from `@systhemaui/core` only wraps a legacy Tailwind config. The `withSysthema()` that wraps `next.config.ts` comes from `@systhemaui/next/config`, and the one that wraps a Payload config from `@systhemaui/payload`.

## Email templates

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

```ts
import { getEmailTailwindConfig } from '@systhemaui/core'

const tailwindConfig = getEmailTailwindConfig()
```

## Related

- [Cascade layers](https://docs.systhema.app/ar/next/styling/cascade-layers.md)
- [Component CSS blocks](https://docs.systhema.app/ar/next/styling/blocks.md)
- [Installation](https://docs.systhema.app/ar/next/getting-started/installation.md)