5. Tailwind CSS

이 문서는 Tailwind CSS를 사용하여 프로젝트에 리셋 CSS를 적용하는 방법에 대한 설명입니다.

---

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

@tailwind base;
@tailwind components;
@tailwind utilities;

위 설정을 추가하면 처음에 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개를 개발 의존성으로 설치합니다.

$ pnpm add --save-dev tailwindcss postcss autoprefixer

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)을 설치하면 개발 경험이 훨씬 좋아집니다.