React + Vite 환경에서 TailwindCSS 설치하기

⚒️ TailwindCSS 설치하기

---

공식 문서

아주 쉽게 잘 설명되어 있다! 

https://tailwindcss.com/docs/guides/vite

Install Tailwind CSS with Vite - Tailwind CSS

 

0. 프로젝트 생성

react + vite 프로젝트를 생성한 후 프로젝트 폴더로 이동한다. (my-project : 프로젝트 이름)

npm create vite@latest my-project -- --template react
cd my-project

 

 

App.jsx에 아래와 같이 코드를 써보고

import "./App.css";

function App() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

export default App;

 

터미널에 npm run dev 를 입력해 확인해본다. 

 

1. Tailwind CSS 설치

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

 

postcss.config.js와 tailwind.config.js 파일이 생성된다.

2. tailwind.config.js 설정

아래와 같이 content에 경로를 추가해준다.

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

3. Tailwind directives를 index.css에 추가

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

 

 

터미널에 npm run dev 를 입력해 확인해본다. 

아래와 같이 변경되면 성공! 

 

✍🏻 Editor 설정하기 (VS Code)

---

 

Tailwind CSS IntelliSense (Tailwind 자동완성)

 

자동 완성, 구문 강조, Linting과 같은 고급 기능을 사용자에게 제공하여 Tailwind 개발 환경을 향상시키는 확장 프로그램이다.

 

설치하기

 

Tailwind CSS IntelliSense 확장 프로그램을 설치한다.

 

Ctrl(Cmd) + Shift + P  를 눌러 Open User Settings(JSON) 을 클릭하여 settings.json 파일을 연다.

  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  }

 

settings.json

위 코드를 아래와 setting.json에 삽입해준다.

 

사용 화면

위와 같이 자동완성이 적용되면 성공!

 

 

prettier-plugin-tailwindcss (클래스 자동 정렬)

 

권장 클래스 순서에 따라 클래스를 자동으로 정렬해주는 Tailwind CSS용 Prettier 플러그인이다.

 

공식 깃허브

공식 깃허브 리드미에 사용 방법이 자세히 나와있다. (커스텀 클래스 정렬도 가능하다!)

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on

 

설치하기

터미널에 아래 명령어를 입력한다.

npm install -D prettier prettier-plugin-tailwindcss

 

프로젝트 최상단 폴더에 .prettierrc 파일을 생성하고 아래와 같이 작성해준다.

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

 

우왕

 

위와 같이 클래스를 마구잡이로 쓰고 저장하면 순서가 자동 정렬 되면 성공!

 

본격적으로 프론트를 시작할 준비가 되었다~!

 

 

---

 

+ 아래 블로그에 생산성 최적화 등 추가 설정이 자세히 설명되어 있다. 

더 설정하고 싶다면 추천 👍🏻

https://xionwcfm.tistory.com/277

tailwind css를 vite react project에 도입하기