Tailwind CSS

Tailwind CSS는 HTML을 벗어나지 않고 현대적인 웹사이트를 빠르게 구축할 수 있는 CSS 프레임워크입니다.

빠른 시작

템플릿을 사용하려는 경우, 이 가이드는 이 Tailwind CSS + Turborepo 템플릿을 빌드하는 방법을 안내합니다.

Terminal

pnpm dlx create-turbo@latest -e with-tailwind

가이드

이 가이드는 Tailwind CSS v4용입니다.

monorepo 만들기

기존 프로젝트가 없는 경우, create-turbo를 사용하여 새 monorepo를 만듭니다:

Terminal

pnpm dlx create-turbo@latest

애플리케이션에 Tailwind CSS 추가

프론트엔드 프레임워크에 대해 Tailwind CSS를 설정하려면 Tailwind CSS 가이드를 따르세요.

완료되면 UI 패키지를 애플리케이션에 가져오는 작업을 시작할 수 있습니다.

공유 Tailwind CSS 구성 패키지 만들기

먼저, 네 개의 파일이 있는 Internal Package를 빌드합니다:

This package.json installs Tailwind CSS so we can create the file shared styles and export for the rest of the repository.

./packages/tailwind-config/package.json

{
  "name": "@repo/tailwind-config",
  "version": "0.0.0",
  "type": "module",
  "private": true,
  "exports": {
    ".": "./shared-styles.css",
    "./postcss": "./postcss.config.js"
  },
  "devDependencies": {
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.5"
  }
}

UI 패키지 만들기

이제 애플리케이션에 공유할 컴포넌트를 빌드할 수 있습니다.

전체 예제는 Tailwind CSS 예제의 @repo/ui 패키지 소스 코드를 방문하세요. Tailwind CSS 설정에 필요한 파일은 아래와 같습니다.

The package.json installs the dependencies for the package, sets up scripts for development and build environments, and marks the exports for the package.

./packages/ui/package.json

{
  "exports": {
    "./styles.css": "./dist/index.css",
    "./*": "./dist/*.js"
  },
  "scripts": {
    "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
    "build:components": "tsc",
    "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
    "dev:components": "tsc --watch"
  },
  "devDependencies": {
    "@repo/tailwind-config": "workspace:*",
    "@tailwindcss/cli": "^4.1.5",
    "@tailwindcss/postcss": "^4.1.5",
    "autoprefixer": "^10.4.20",
    "tailwindcss": "^4.1.5"
  }
}

Good to know:

Above, we've only included the code related to setting up Tailwind. The full package.json is here.

애플리케이션에서 UI 패키지 사용

만든 패키지를 애플리케이션에 설치합니다.

Terminal

pnpm add @repo/ui @repo/tailwind-config --save-dev --filter=@repo/ui --filter=web

Then, configure the files in your application so the styles from the UI package are reflected in the application.

./apps/web/app/globals.css

@import 'tailwindcss';
@import '@repo/tailwind-config';