CSS

Tailwind CSS

TemplateX can add Tailwind CSS to a theme without changing the way TemplateX views are authored.

When To Use It#

Use Tailwind when you want most styling decisions to live directly in markup:

phpresources/views/front-page.php
<section class="mx-auto max-w-5xl px-6 py-16">  <h1 class="text-5xl font-bold">{{ title }}</h1>  <p class="mt-4 text-lg">{{ intro }}</p></section>

You still write TemplateX source in resources/views, link CSS from your layout, and publish a normal WordPress theme.

Enable Tailwind#

In WordPress admin:

  1. Open TemplateX.
  2. Go to Settings, then Development.
  3. Turn on Enable Tailwind CSS.
  4. Wait for the autosave toast to confirm the setting.

Then run this from the active theme folder:

bash
npm install

Or:

bash
bun install

Restart development after the install:

bash
npm run dev

Or:

bash
bun run dev

What TemplateX Changes#

TemplateX adds Tailwind packages to the theme:

text
tailwindcss@tailwindcss/vite@tailwindcss/typography

It also adds the Tailwind Vite plugin to vite.config.js and adds these directives to the theme CSS entry:

cssresources/css/main.css
@import "tailwindcss";@plugin "@tailwindcss/typography";@source "../views";

@source "../views" tells Tailwind to scan TemplateX source views for utility classes.

Why It Helps#

Tailwind keeps spacing, color, layout, and typography close to the HTML that uses them. That works well with TemplateX because views are already meant to stay readable and close to the page.

The published theme still contains built CSS and native WordPress PHP. It does not need Tailwind or TemplateX on the destination site.

Turning It Off#

Disabling Tailwind removes the TemplateX-managed packages, Vite plugin setup, and CSS directives.

Classes already written in templates stay in source, but Tailwind will no longer generate CSS for them.