Tailwind CSS 4

This project uses Tailwind CSS 4's Vite plugin. There is no application framework or JavaScript entry point: edit the HTML and CSS directly.

Try it in the browser

Change bg-sky-100 to bg-amber-100 in index.html, adjust the spacing utilities, or change the brand color in styles.css. The preview updates as Tailwind generates the CSS.

Configure Tailwind

Add Tailwind to Vite's plugins:

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({ plugins: [tailwindcss()] });

Import Tailwind from a stylesheet linked in your HTML. Use @theme to define utility values:

@import 'tailwindcss';

@theme {
  --color-brand: #698aff;
}

You can now use bg-brand, text-brand, and the other color utilities. See Quickstart to run your own project with Startpod.