201. Tailwindcss with Vite, React

1. Vite란?

 

 

2. Tailwindcss 라이브러리 설치 & 프로젝트 생성

[tailwind 4.1.6 기준 설치 - (VITE 필수)]

*) npm은 이미 설치는 기본. (설치 가이드 참조할 것.)

 

1) react 기본 페이지 라우터 설치

    -> npm install react-router-dom (설치 필수)

 

2) vite용 프로젝트 생성 및 초기셋업

    -> npm create vite@latest [프로젝트명] -- --template react

    -> cd [프로젝트 폴더] && npm install

 

3) tailwindcss 라이브러리 설치(VITE용)

npm install react-router-dom

npm install tailwindcss @tailwindcss/vite

 

4) postcss.config.mjs 파일 생성

export default {

plugins: {

"@tailwindcss/postcss": {},

},

};

 

5) vite.config.js

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({

plugins: [

tailwindcss(),

react(),

],

})

-> tailwind 부분을 추가하면 된다.

 

6) index.css 셋팅 및 main에서 import

[index.css]

@import "tailwindcss";

 

[Main.jsx]

import { StrictMode } from 'react';

import { createRoot } from 'react-dom/client';

import './index.css';

import App from './App.jsx';

createRoot(document.getElementById('root')).render(

<StrictMode>

<App />

</StrictMode>,

)

 

7) App.jsx에서 각 컴포넌트 라우팅 및 컴포넌트 코딩

import { BrowserRouter, Routes, Route } from "react-router-dom";

import MyAsset_Button from "./component_my_asset/MyAsset_Button";

function App() {

return(

<BrowserRouter>

<Routes>

<Route path="/" element={<MyAsset_Button />} />

</Routes>

</BrowserRouter>

);

}

export default App;

-> 각 MyAsset_Button 컴포넌트와 같은 것들을 tailwind 기반으로 코딩한다. (tailwindcss 공홈 참조) 

-> 메인에서 import한 index.css에 tailwindcss 참조선언이 되어있기 때문에 최종적으로 메인에서 스타일 적용됨. 

-> 빌드 실행은 -> "npm run dev" 실행한다. (vite 프로젝트에서는 npm start X)

 

Tip)

자신만의 커스텀 Tailwindcss 짜기 (만들어두고 재사용할 경우 아래처럼)

[index.css]

@import "tailwindcss";

@layer utilities {
  @keyframes fadeBounce {
    0% {
      opacity: 0;
      transform: translateY(0);
    }

    50% {
      opacity: 1;
      transform: translateY(-10%);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-bounce {
    animation: fadeBounce 5s ease-in-out;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded font-semibold;
  }

  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600 transition;
  }

  .btn-outline {
    @apply border border-blue-500 text-blue-500 hover:bg-blue-100;
  }
}

 

[@layer component, utillities, base 카테고리 설명]

주로 component, utilties로 자신만의 커스텀 UI 설계해두고 불러다 씁시다.

@apply 선언은 원래 저안이 CSS구문만을 선언할 수 있는데
CSS 파일에서 tailwindcss 구문을 이너로 정의할 수 있게 해준다.