[리액트(React)] Tailwind CSS(테일윈드 CSS) 사용하기

에서 테일윈드 CSS에 대한 전반적인 내용을 담았다.

이번엔 리액트에서 활용하는 방법에 대해 적어볼 예정이다.

나는 vite로 react를 생성했기 때문에 Install Tailwind CSS with Vite > Using React의 설명을 참조했다.
(https://tailwindcss.com/docs/guides/vite)

Install Tailwind CSS with Vite - Tailwind CSS

---

1. 설치

npm install -D tailwindcss postcss autoprefixer

---

2. 설정 파일 생성

npx tailwindcss init -p

postcss.config.js와 tailwind.config.js 파일이 생성되었을 것이다.

---

3. 설정 파일 수정

- tailwind.config.js 에서 content를 공식 문서에 적혀 있는 대로 수정한다.

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

- theme > extend 에서 폰트도 설정할 수 있다.

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        title: ['"Pacifico"', 'cursive'],
      },
    },
  },
  plugins: [],
};

<h1 className="font-title">

---

4. CSS 파일 구성

- index.css 파일을 공식 문서에 적혀 있는 대로 수정한다.

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

---

5. CSS 적용하기

- className에 정해진 CSS 규칙을 적용한다.

<header className="flex flex-col items-center mt-8 mb-16">