react 에 tailwindcss 적용하는 방법

목차

tailwind 패키지 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

(참고로 -p 플래그는 자동으로 postcss.config.js까지 생성해줍니다.)

tailwind 설정파일 기본 구성

tailwind.config.js 에서 설정이 관리됩니다.

javascriptCopy/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html"  // HTML 파일도 추가 권장
  ],
  theme: {
    extend: {
      // 커스텀 테마 설정 가능
    },
  },
  plugins: [
    // 필요한 플러그인 추가 가능
  ],
}

CSS 파일 설정

src/index.css
에서 아래 부분을 붙여넣습니다.

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

Import 확인

혹시 import 관련 에러가 발생한다면, src/index.js 등 index.css를 불러오는 곳을 확인해서 경로나 잘 불러오고 있는지 확인합니다.
(먼저 서버를 재시작하는 것도 좋은 방법입니다.)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';  // Tailwind CSS import
import App from './App';