[ TailwindCSS] CSS 프레임워크 Tailwind설치 방법 : : React + Vite + TypeSrcipt + TailwindCSS

  Tawilwind

 

엄청나게 많은 유틸리티 클래스로 이루어진 CSS 프레임워크입니다. 제공되는 유틸리티 클래스들을 다양하게 조합하여 CSS 코드 작성 없이 class 속성에서 스타일링을 할 수 있습니다. 

 

 

^현재 버전 : V3.3.2

^공부 환경 : React + TS + Vite

 

 

   Install 방법

 

1. vite 로 리액트 프로젝트 생성 

npm create vite@latest {생성 예정 폴더 이름} 

이렇게 하면 Vite 설정할 수 있는 선택지들이 나오는데 원하는대로 엔터> 엔터 > 엔터 > 하믄 됩니다! 

 

 

 

2. Tailwind CSS 설치 

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

- tailwind.config.js파일이랑 postcss.config.js파일이 생성됩니다. 

 

 

# 2 번 이후 생성된 파일들 

 

각 폴더들의 config.js 설정 을 해주어야 합니다. 

 

3. tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
		"./index.html",
		"./src/**/*.{js,ts,jsx,tsx}",
		"./node_modules/flowbite/**/*.js",
        ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/폴더 안에 있는 js, jsx, ts, tsx확장자의 파일에서 tailwindcss를 사용할 수 있습니다,.  + index.html

 

 

4. src/ main.tsx 와 src/index.css 파일이름을 " 충돌 방지"를 위해 수정 

 

^src/main.tsx => src/main.pcss

^src/index.css => src/index.pcss

-> 굳이 해주지 않아도 문제 없었음.

 

 

5. index.pcss 파일내부 작성

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

만약에 @tailwind 부분에 빨간 줄이 그어진다면, 이 친구를 설치해주면 해결 됩니다. 

 

 

6.App.tsx 파일 수정해서 잘 되는지 확인해보기 (나머지 import React .. 이런거 다 지워주기!)

function App() {


  return (
    <>
      <div className="min-h-screen flex justify-center items-center">
        <h1 className="text-3xl font-bold text-blue-600">React + Vite + TypeScript + Tailwind</h1>
      </div>
    </>
  )
}

export default App

 

 

잘 적용 되었는지 실행해봅시다! Vite 는 CRA 와는 다른 명령어를 가지고 있습니다. 

npm run dev

 

 

 

**//^ 성__공^//**

 

 

 

 

- Vite + React + Tailwind CSS : 설치 방법 

- Vite + React + Typescript + Tailwind CSS : 설치 방법 

- 프론트엔드 CSS라이브러리 비교