> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/01.-setup/5.-tailwind-css.md).

# 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`에 다음 한 줄을 추가합니다.

{% code title="src/app/layout.tsx" %}

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

{% endcode %}

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

{% code title="src/app/ui/globals.css" %}

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

{% endcode %}

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

***

## Install

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

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

{% stepper %}
{% step %}

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

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

```bash
$ yarn add tailwindcss @tailwindcss/postcss
```

{% endstep %}

{% step %}

### 초기화: Tailwind 설정 파일 생성

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

```bash
$ npx tailwindcss init -p
```

{% endstep %}

{% step %}

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

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

{% code title="tailwind.config.ts" %}

```ts
import type { Config } from 'tailwindcss';

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

export default config;
```

{% endcode %}
{% endstep %}

{% step %}

### 개발 서버 실행

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

```bash
$ npm run dev
```

{% endstep %}
{% endstepper %}

<figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2Fh7vd3w6KkQQElYW4X80P%2Fimg.png?alt=media&amp;token=68694f01-72d2-4a21-b6fe-4db6e21dbbde" alt=""><figcaption></figcaption></figure>

***

## VS Code 추가 extension

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

{% hint style="info" %}
Tailwind 관련 VS Code 확장(예: Tailwind CSS IntelliSense, PostCSS Language Support)을 설치하면 개발 경험이 훨씬 좋아집니다.
{% endhint %}