> 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/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/01.-setup/5.-tailwind-css.md).

# 5. Tailwind CSS

This document explains how to apply reset CSS to a project using Tailwind CSS. ※ X2BEE FO/BO uses Tailwind CSS v4 (4.1.16). Starting with v4, a single line, @import "tailwindcss"; in globals.css, is enough — a tailwind.config file and autoprefixer are not needed (@tailwindcss/postcss handles vendor prefixing), and the theme is configured in the @theme block in globals.css. The actual FO globals path is src/assets/styles/page/globals.css. The installation steps below are based on the older v3, so use them for reference only.

***

## Reset CSS

1. Add the following one line to `src/app/layout.tsx`.

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

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

{% endcode %}

2. Create the file and enter the following 3 lines in `src/app/ui/globals.css`.

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

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

{% endcode %}

{% hint style="warning" %}
Adding the above setting may initially show a warning in VS Code.\
In this case, installing the "PostCSS Language Support" extension in VS Code will make the warning disappear.
{% endhint %}

***

## Install

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

The following is the installation and initial setup sequence:

{% stepper %}
{% step %}

### Install: Add Tailwind and Related Packages

Run the following command in the terminal to install 3 packages as dev dependencies.

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

{% endstep %}

{% step %}

### Initialize: Create the Tailwind Configuration File

Running the following command automatically generates 2 files, `tailwind.config.js` and `postcss.config.js`.

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

{% endstep %}

{% step %}

### Change the tailwind.config File to TypeScript and Replace Its Content

You may also rename the generated `tailwind.config.js` to `.ts` (e.g., `tailwind.config.ts`). Replace the file content with the following code.

{% 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 %}

### Run the Dev Server

Run the development server with the following command, and you can confirm that the CSS has been reset.

```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&#x26;token=68694f01-72d2-4a21-b6fe-4db6e21dbbde" alt=""><figcaption></figcaption></figure>

***

## Additional VS Code Extensions

* Tailwind CSS IntelliSense: Provides a list of utility classes and autocomplete functionality while coding.

{% hint style="info" %}
Installing Tailwind-related VS Code extensions (e.g., Tailwind CSS IntelliSense, PostCSS Language Support) will greatly improve your development experience.
{% endhint %}