[React+vite] Tailwind Css 설치방법

Tailwind CSS는 현대적인 웹 개발에서 많이 사용되는 유틸리티 퍼스트 CSS 프레임워크입니다. 이 프레임워크는 개발자가 빠르고 효율적으로 스타일을 적용할 수 있도록 도와줍니다. 이번 포스트에서는 Tailwind CSS의 설치 방법과 사용법에 대해 자세히 알아보겠습니다.

⏺ Tailwind CSS란?

Tailwind CSS는 기존의 CSS 프레임워크와는 다르게, 미리 정의된 클래스들을 조합하여 스타일을 적용하는 방식입니다. 이로 인해 개발자는 CSS를 작성하는 대신, HTML 요소에 필요한 클래스를 추가하는 것만으로도 원하는 디자인을 구현할 수 있습니다. Tailwind CSS의 장점은 다음과 같습니다:

• 유연성 : 필요에 따라 클래스를 조합하여 다양한 스타일을 만들 수 있습니다.
• 재사용성 : 동일한 클래스를 여러 곳에서 재사용할 수 있어 코드의 중복을 줄일 수 있습니다.
• 빠른 개발 : 미리 정의된 클래스를 사용하여 빠르게 UI를 구성할 수 있습니다.

⏺ Tailwind CSS 설치하기

공식 참고 : https://tailwindcss.com/docs/installation/using-vite

Installing with Vite - Installation

 

1. Vite + react 프로젝트 열기(my_app)

npm create vite@latest

# 설정한 순서
1. 프로젝트 이름 = vite_app
2. 리액트
3. javaScript
4. no
5. y

 

2. Tailwind CSS 설치

# tailwindcss, postcss 다운로드
npm install -D tailwindcss@3 postcss autoprefixer

#환경파일 추가
npx tailwindcss init -p

 

 

3. tailwind.config.js 파일 수정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

4. postcss.config.js 파일 수정

module.exports = {
  plugins: {
    'tailwindcss': {},
    'autoprefixer': {},
  }
}

 

 

5. /src/index.css 파일 수정

- 기존에 파일 내용은 모두 삭제하고 내용 수정

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

 

6. Tailwind Css 설정 확인

 - /src/App.js 파일 수정

• 리액트에서는 class 속성을 대신에 className속성 사용
• text-3xl : 텍스트 크기
• font-bold : 폰트 굵게
• uunderline : 밑줄

function App() {
  const [count, setCount] = useState(0)

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