Styling with Tailwind

Use Effront's Tailwind integration to style your components and share a theme across the application. It loads the stylesheet for you, whether you use Tailwind's default utilities or a stylesheet with custom theme values and plugins.

Add Tailwind utilities

Install the integration:

vp add -D @effront/tailwind@0.2.0

In vite.config.ts from Getting started, add effrontTailwind():

// vite.config.ts
import { effrontServer } from "@effront/server/vite";
// Added: Tailwind integration.
import { effrontTailwind } from "@effront/tailwind";
import { effront } from "@effront/vite";
import { defineConfig } from "vite-plus";

export default defineConfig({
  // Added: effrontTailwind().
  plugins: [effront(), effrontServer(), effrontTailwind()],
});

No stylesheet or component-level CSS import is needed.

Use utilities in your component's JSX:

<h1 className="p-4 text-xl font-bold">Hello</h1>

Define a theme in a stylesheet

To add a shared color or other theme value, install Tailwind as a direct dependency:

vp add -D tailwindcss@4.3.3

Create src/styles.css:

@import "tailwindcss";

@theme {
  --color-brand: #2563eb;
}

In vite.config.ts, pass the stylesheet to effrontTailwind():

// vite.config.ts: replace effrontTailwind() in the plugins array.
effrontTailwind({ stylesheet: "./src/styles.css" });

The path is relative to the Vite root. This file replaces the default stylesheet, so retain @import "tailwindcss";. Effront loads it automatically without a component-level import. Use text-brand or bg-brand to apply the new color.

Add an optional Tailwind plugin

Install a plugin and configure it in the selected stylesheet according to its documentation. For example, Typography adds styles for article content:

vp add -D @tailwindcss/typography

Add the Typography plugin to src/styles.css, keeping the existing import and theme:

/* src/styles.css: add the plugin after the existing import. */
@import "tailwindcss";
/* Added: Typography plugin. */
@plugin "@tailwindcss/typography";
/* Keep the existing @theme block below. */

Wrap the article in <article className="prose"> to style its headings, paragraphs, and lists. Typography is optional and is not required to render Markdown.

See the Tailwind API for integration options and Tailwind CSS documentation for utilities and theme syntax.