본문으로 건너뛰기

Tailwind CSS 통합

TanStack Start 프로젝트에서 Tailwind CSS를 사용하고 싶으신가요?

이 가이드에서는 TanStack Start 프로젝트에서 Tailwind CSS를 사용하는 방법을 안내합니다.

Tailwind CSS 버전 4(최신)​

Tailwind CSS의 최신 버전은 4입니다. 이 버전에는 Tailwind CSS 버전 3과 크게 다른 몇 가지 구성 변경 사항이 있습니다. Vite 또는 Rsbuild를 사용하여 TanStack Start 프로젝트에 Tailwind CSS 버전 4를 설정하는 것이 더 쉽고 권장됩니다.

Tailwind CSS 설치​

Tailwind CSS와 빌드 도구용 통합 패키지를 설치합니다.

Vite

npm install tailwindcss @tailwindcss/vite

Rsbuild

npm install tailwindcss @tailwindcss/postcss postcss

Tailwind CSS 구성​

빌드 도구 구성에 Tailwind CSS를 추가합니다.

Vite

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'
import viteReact from '@vitejs/plugin-react'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [tsConfigPaths(), tanstackStart(), viteReact(), tailwindcss()],
})

Rsbuild

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [pluginReact(), tanstackStart()],
})
postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

CSS 파일에서 Tailwind를 가져옵니다​

버전 4에서는 구성 파일 대신 Tailwind CSS를 구성할 CSS 파일을 생성해야 합니다. src/styles/app.css 파일을 생성하거나 원하는 이름으로 지정할 수 있습니다.

/* src/styles/app.css */
@import 'tailwindcss' source('../');

__root.tsx 파일에서 CSS 파일을 가져옵니다​

__root.tsx 파일에서 CSS 파일을 가져옵니다.

Vite

?url 쿼리를 사용하고 파일 맨 위에 삼중 슬래시 지시문을 추가해야 합니다.

// src/routes/__root.tsx
/// <reference types="vite/client" />
// other imports...

import appCss from '../styles/app.css?url'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      // your meta tags and site config
    ],
    links: [{ rel: 'stylesheet', href: appCss }],
    // other head config
  }),
  component: RootComponent,
})

Rsbuild

Start가 생성된 스타일시트를 라우트 애셋으로 탐색할 수 있도록 부수 효과 import를 사용합니다.

// src/routes/__root.tsx
import { createRootRoute } from '@tanstack/react-router'
import '../styles/app.css'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      // your meta tags and site config
    ],
    // other head config
  }),
  component: RootComponent,
})

프로젝트 어디서나 Tailwind CSS를 사용합니다​

이제 프로젝트 어디서나 Tailwind CSS를 사용할 수 있습니다.

// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Home,
})

function Home() {
  return <div className="bg-red-500 text-white p-4">Hello World</div>
}

이것으로 끝입니다! 이제 프로젝트 어디서나 Tailwind CSS를 사용할 수 있습니다 🎉.

Tailwind CSS 버전 3(레거시)​

Tailwind CSS 버전 3을 사용하려면 다음 단계를 따릅니다.

Tailwind CSS를 설치합니다​

Tailwind CSS와 피어 종속성을 설치합니다.

npm install -D tailwindcss@3 postcss autoprefixer

그런 다음 Tailwind 및 PostCSS 구성 파일을 생성합니다.

npx tailwindcss init -p

템플릿 경로를 구성합니다​

tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가합니다.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSS 파일에 Tailwind 지시문 추가​

Tailwind의 각 레이어에 대한 @tailwind 지시문을 src/styles/app.css 파일에 추가합니다.

/* src/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

[!NOTE] __root.tsx 파일에서 CSS 파일을 가져오는 방법은 __root.tsx 파일에서 CSS 파일 가져오기로 이동하여 확인합니다.