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 by following the Build a Project from Scratch guide on the TanStack Start website.

Terminal

mkdir myAppcd myAppnpm init -y# Follow instructions in the "Build a Project from Scratch" guide

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 plugins in your Vite config file.

vite.config.ts

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

Import Tailwind CSS

Create a ./src/styles/app.css file and add an @import for Tailwind CSS.

src/styles/app.css

@import "tailwindcss";

Import CSS file in the root component

Add the triple-slash directive on top of the file and import the CSS file with the right query parameter.

src/routes/__root.tsx

/// <reference types="vite/client" />import type { ReactNode } from 'react'import { createRootRoute, Outlet } from '@tanstack/react-router'import { Meta, Scripts } from '@tanstack/start'import appCss from '../styles/app.css?url'export const Route = createRootRoute({  head: () => ({    meta: [      // ...    ],    links: [      {        rel: 'stylesheet',        href: appCss,      },    ],  }),  component: RootComponent,})

Start your build process

Run your build process with npm run dev.

Terminal

npm run dev

Start using Tailwind in your project

Start using Tailwind's utility classes to style your content while making sure to import the newly created CSS file.

src/routes/index.tsx

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