> 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="/files/89d7Uxhr6NYiVaZSvcsy" 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/01.-setup/5.-tailwind-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.