Install Tailwind CSS with TanStack Start

Setting up Tailwind CSS in a TanStack Start project.

Create project

Start by creating a new TanStack Start project if you don’t have one set up already. The most common approach is to use Create Start App.

Terminal

npx create-start-app@latest my-projectcd my-project

Install Tailwind CSS

Install @tailwindcss/vite and its peer dependencies via npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configure Vite Plugin

Add the @tailwindcss/vite plugin to your Vite configuration.

vite.config.ts

import { tanstackStart } from '@tanstack/react-start/plugin/vite';import { defineConfig } from 'vite';import tsConfigPaths from 'vite-tsconfig-paths';import tailwindcss from '@tailwindcss/vite'export default defineConfig({  plugins: [    tailwindcss()    tanstackStart(),    tsConfigPaths(),  ]});

Import Tailwind CSS

Add an @import to ./src/styles.css that imports Tailwind CSS.

src/styles.css

@import "tailwindcss";

Import the CSS file in your root route

Import the CSS file in your __root.tsx file with the ?url query.

src/routes/__root.tsx

// other imports...import appCss from '../styles.css?url'export const Route = createRootRoute({  head: () => ({    meta: [      // your meta tags and site config    ],    links: [{ rel: 'stylesheet', href: appCss }],    // other head config  }),  component: RootComponent,})

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

src/routes/index.tsx

import { createFileRoute } from '@tanstack/react-router'export const Route = createFileRoute('/')({  component: App,})function App() {  return (    <h1 class="text-3xl font-bold underline">      Hello World!    </h1>  )}