# [React] 1. Vite +react + typescript + tailwind Setting

---

---

🚶‍♂️ Vite + react + Tailwindcss 4 Setting

2025.1.22 일 이후 tailwind 4.0 이 발표되면서 설치와 실행이 매우 간단해졌다.

(1) vite 프로젝트 생성, tailwind 설치

## basic setting check 
node -v # 22.14.0
npm -v # 10.9.2

## 
npm create vite@latest my-tailwind-app --template
cd my-tailwind-app
npm install tailwindcss @tailwindcss/vite

아직 npm run dev 를 하면 안된다..

(2) vite.config.js 에 플러그인 추가

vite.config.js

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) App.css 에 tailwind import

/src/App.css

@import "tailwindcss";

(4) App.tsx 에서 tailwind style 적용하기

/src/App.tsx

      <h1 className='text-red-600'>Vite + React</h1>
      <h1 className="text-3xl font-bold text-blue-600 underline">
        Hello world!
      </h1>

npm run dev 

실행 결과

느낀점

하아.. 정말 많이 돌아왔다. 그냥 최신 사이트에서 있는 그대로 글을 한번 읽어보고 유튜브에 나온거 따라하면 5분안에 해결될일은 오래전의 책을 따라하다가 gpt 와씨름하고 버전이 다른걸 하루만에 깨닫고 맨붕으로 3시간을 날리고. 프로젝트를 지웠다 다시 시작하기를 5번.. 이게 무슨 짓이란 말인가.
그냥 영어를 읽자. 그게 제일 빠르다.

npm i  chance luxon
npm i -D @types/chance @types/luxon 

## daisyui plugin install 
npm i -D daisyui
npm i -D @tailwindcss/line-clamp

(5) Tailwindcss.tsx 작성

src/pages/Tailwindcss.tsx

import * as D from '../data'
export default function Tailwindcss() {
    return (
        <>
        <div className='bg-black/70'>
            <p className='w-full p-4 text-3xl text-white'>Tailwindcss</p>
            <p className='italic text-gray-50 line-clamp-3'>{D.randomParagraphs(10)}</p>
            <button className='btn btn-primary' style={{textTransform: 'none'}}>
                Button
            </button>
        </div>        
        </>
    )
}

-line clamp 3 은 길어도 3줄을 넘지말라는 것.

---

ℹ️ 참고

1. 📼 youtube, 2025 How to Set up Tailwind CSS V4 4.0 | Install Tailwind CSS v4 in Vite React |TailwindCSS setup

2.📚 Do it! 리액트로 웹앱 만들기

---