> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sitecopilot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming with Tailwind

This page details how to integrate the generated `tailwind.config.js` into your theme build, recommended Tailwind settings, and how to produce a small, production-ready CSS bundle.

## Integrating `tailwind.config.js`

1. Put the generated `tailwind.config.js` in the theme root (`themes/<theme>/tailwind.config.js`).
2. Create a small entry CSS file (e.g., `src/input.css`):

```css theme={null}
@tailwind base;
@tailwind components;
@tailwind utilities;
```

3. Build using Tailwind CLI or via a bundler:

```bash theme={null}
npx tailwindcss -c tailwind.config.js -i src/input.css -o dist/theme.css --minify
```

## Recommended Tailwind config options

* Enable JIT / Just-In-Time mode (for latest Tailwind versions this is default).
* Set `content` paths narrowly to your theme's `src` and `components` directories to avoid bloated CSS.
* Configure `safelist` for dynamic classes used by the template engine.

## Purging & Size

* Use `content` paths to ensure unused utilities are removed.
* Avoid generating full Tailwind in each theme; instead, prefer a shared base and theme-specific extensions when possible.

## Runtime token injection

* Build produces CSS and a small token stylesheet (CSS variables). At runtime inject the token stylesheet before the theme CSS to ensure CSS variables are available.

## Example build script (package.json)

```json theme={null}
{
  "scripts": {
    "build-theme": "npx tailwindcss -c tailwind.config.js -i src/input.css -o dist/theme.css --minify"
  }
}
```

## Testing

* Run a local static server to preview compiled HTML + CSS.
* Use `npx serve dist` or `live-server` to quickly inspect pages.