Cài đặt Tailwind CSS với TanStack Start

Thiết lập Tailwind CSS trong dự án TanStack Start.

Tạo dự án

Bắt đầu bằng cách tạo một dự án TanStack Start mới nếu bạn chưa thiết lập. Cách phổ biến nhất là sử dụng Create Start App.

Terminal

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

Cài đặt Tailwind CSS

Cài đặt @tailwindcss/vite và các peer dependencies thông qua npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Cấu hình Vite Plugin

Thêm plugin @tailwindcss/vite vào cấu hình Vite của bạn.

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

Thêm @import vào ./src/styles.css để import Tailwind CSS.

src/styles.css

@import "tailwindcss";

Import file CSS vào root route

Import file CSS vào file __root.tsx của bạn với query ?url.

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

Bắt đầu sử dụng Tailwind trong dự án của bạn

Bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.

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