ReactJS에 Tailwind CSS v4.0 적용하는 방법

안녕하세요. 이 글은 ReactJS에 Tailwind v4.0을 적용하는 방법을 설명합니다.

 

2025.1.22에 Tailwind CSS v4.0가 공개되어 ReactJS에 Tailwind v4.0이 잘 적용되는지 확인해봤습니다. Tailwind는 CSS프레임워크로써 HTML 요소에 tailwind 클래스를 활용하여 스타일을 적용합니다.

 

1.  ReactJS 프로젝트 생성

vite를 사용하여 ReactJS 프로젝트를 생성합니다. 저는 프로젝트 이름을 test-project로 설정했고 언어는 typescript를 사용합니다.

npm create vite@latest

 

ReactJS 프로젝트 경로로 들어가서 패키지를 설치합니다.

cd test-project
npm install

 

2.  Tailwind CSS 설치

1) npm으로 Tailwind CSS를 설치합니다.

npm install tailwindcss @tailwindcss/vite

 

2) vite 설정파일(vite.config.ts)에서 Tailwindcss를 설정합니다. import에 Tailwind CSS 패키지를 추가하고 플러그인 목록에 tailwindcss 모듈을 추가합니다.

// vite.config.ts 파일
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ],
})

 

3) src/App.css파일의 내용을 삭제합니다. 그리고 Tailwindcss를 import합니다.

@import "tailwindcss";

 

4) APP.tsx파일에서 H1태그를 생성합니다. Tailwind CSS 스타일은 글씨색깔, 굵기 설정, 밑줄을 설정했습니다.

import { useState } from 'react'
import './App.css'

function App() {

  return (
    <>
      <h1 className="text-red-500 text-3xl font-bold underline">
        Hello world!
      </h1>
    </>
  )
}

export default App

3.  실행

npm run dev로 ReactJS를 실행합니다. 그리고 웹 브라우저에서 Tailwind CSS가 잘 적용되었는지 확인합니다.

npm run dev

 

4.  참고자료

• Tailwind CSS 공식문서: https://tailwindcss.com/docs/installation/using-vite
• youtube: Install Tailwind CSS Latest Version 4.0 in React JS Project - https://youtu.be/asP3DAs2G7I