Skip to main content

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.

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):
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Build using Tailwind CLI or via a bundler:
npx tailwindcss -c tailwind.config.js -i src/input.css -o dist/theme.css --minify
  • 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)

{
  "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.