React + Tailwind v4 + shadcn/ui (JS, React 19.2.0) 세팅 하기

[주인장]

# React +  Vite + Tailwind v4 + shadcn/ui (JS, React 19.2.0)

1. 설치

- npm create vite@latest react-tailwind -- --template react

- cd react-tailwind

- npm install

2. Tailwind CSS v4 설치 + Vite 패키지 설치 

 - Tailwind v4는 예전처럼 tailwind.config.js를 꼭 만들 필요 없

- npm install tailwindcss @tailwindcss/vite

2-1 vite.config.js 수정

import { defineConfig } from "vite";

import react from "@vitejs/plugin-react";

import tailwindcss from "@tailwindcss/vite";

import path from "path";

// https://vite.dev/config/

export default defineConfig({

  plugins: [react(), tailwindcss()],

  resolve: {

    alias: {

      "@": path.resolve(__dirname, "./src"),

    },

  },

});

설치시 오류 발생하면 아래 패키지 추가

- npm install -D @types/node

2-2. src/index.css 을 Tailwind 용으로 변경

다 지우고 

@import‎ "tailwindcss";

2-3 main.jsx 수정 

import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App.jsx";

import "./index.css";   // ✅ 이 줄이 꼭 있어야 Tailwind가 동작함

ReactDOM.createRoot(document.getElementById("root")).render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

3. App.jsx 수정 

import './App.css';

function App() {

  return (

    <div className="min-h-screen flex flex-col items-center justify-center gap-4 bg-slate-900">

      <h1 className="text-3xl font-bold text-white">

        Tailwind v4 + React 19 연습 시작! 🚀

      </h1>     

    </div>

  );

}

export default App

- npm run dev 실행해서 동작 여부 확인 

4. shadcn/ui 준비 

4-1 jsconfig.json ( shadcn용 alias 설정)

{

    "compilerOptions": {

        "baseUrl": ".",

        "paths": {

            "@/*": ["./src/*"]

        }

    }

}

- VSCode에서 @/components/... 자동완성

4-2 shadcn/ui 설치 (초기화)

- npx shadcn@canary init 

4-3 컴포넌트 추가 (버튼)

npx shadcn@latest add button

5. App.jsx 확인

import { Button } from '@/components/ui/button';

import './App.css';

function App() {

  return (

    <div className="min-h-screen flex flex-col items-center justify-center gap-4 bg-slate-900">

      <h1 className="text-3xl font-bold text-white">

        Tailwind v4 + React 19 연습 시작! 🚀

      </h1>

      <Button variant="outline"

              size="lg"

              className="text-white border-white hover:bg-white hover:text-black">

        버튼 컴포넌트

      </Button>

    </div>

  );

}

export default App