Skip to main content
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.