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>  )}

Tailwind CSS 中文网（本网站）的目标是为中文开发者提供准确、及时的 Tailwind CSS 中文文档

Tailwind CSS 中文文档由本网站维护人员共同翻译，采用 MIT 开源协议发布

本网站与 tailwindcss.com 及 Tailwind Labs Inc. 并无从属关系

Tailwind 商标由 Tailwind Labs Inc. 所有