5. Tailwind CSS

이 문서는 Tailwind CSS를 사용하여 프로젝트에 리셋 CSS를 적용하는 방법에 대한 설명입니다. ※ X2BEE FO/BO는 Tailwind CSS v4(4.1.16)를 사용합니다. v4부터는 globals.css 에 @import "tailwindcss"; 한 줄이면 되고, tailwind.config 파일과 autoprefixer 가 필요 없으며(@tailwindcss/postcss 가 vendor prefix 를 처리), 테마는 globals.css 의 @theme 블록에서 설정합니다. 실제 FO globals 경로는 src/assets/styles/page/globals.css 입니다. 아래 설치 절차는 구 v3 기준이므로 참고용입니다.

---

Reset CSS

1. src/app/layout.tsx에 다음 한 줄을 추가합니다.

src/app/layout.tsx

import '@/app/ui/globals.css';

1. 파일을 생성하고 src/app/ui/globals.css에 다음 3줄을 입력합니다.

src/app/ui/globals.css

@import "tailwindcss";
/* Tailwind v4: 위 한 줄로 base·components·utilities 포함 */
/* (v3 의 @tailwind 지시문은 v4 에서 불필요) */

위 설정을 추가하면 처음에 VS Code에서 warning이 뜰 수 있습니다. 이 경우, VS Code에서 "PostCSS Language Support" 확장(extension)을 설치하면 warning이 사라집니다.

---

Install

참조: https://tailwindcss.com/docs/guides/nextjs 참조: https://nextjs.org/docs/app/building-your-application/styling/tailwind-css

다음은 설치와 초기 설정 순서입니다:

1

설치: Tailwind 및 관련 패키지 추가

터미널에서 다음 명령을 실행하여 패키지 3개를 개발 의존성으로 설치합니다.

$ yarn add tailwindcss @tailwindcss/postcss

2

초기화: Tailwind 설정 파일 생성

다음 명령을 실행하면 tailwind.config.js와 postcss.config.js 파일 2개가 자동 생성됩니다.

$ npx tailwindcss init -p

3

tailwind.config 파일을 TypeScript로 변경하고 내용 교체

생성된 tailwind.config.js의 이름을 .ts로 바꿔도 됩니다 (예: tailwind.config.ts). 파일 내용을 다음 코드로 대체하세요.

tailwind.config.ts

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

4

개발 서버 실행

다음 명령으로 개발 서버를 실행하면 CSS가 리셋된 것을 확인할 수 있습니다.

$ npm run dev

---

VS Code 추가 extension

• Tailwind CSS IntelliSense: 코딩 시 utility class 목록과 자동완성 기능을 제공합니다.

Tailwind 관련 VS Code 확장(예: Tailwind CSS IntelliSense, PostCSS Language Support)을 설치하면 개발 경험이 훨씬 좋아집니다.