[React] tailwind css 설치

https://velog.io/@mjieun/React-React%EC%97%90%EC%84%9C-Tailwind-CSS-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[React] React에서 Tailwind CSS 사용하기

 

 

 

• npm을 사용하여 tailwindcss를 설치

npm install -D tailwindcss

• init 명령을 실행하여 tailwind.config.js 파일을 생성

npx tailwindcss init

• tailwind.config.js 파일을 열고 템플릿 파일의 경로를 추가
• 이 명령어는 tailwind.config.js와 postcss.config.js 파일을 생성합니다.

 

(만약 tailwind.config.js 파일 생성 명령어가 안먹힐시

npm install -D tailwindcss@3 postcss autoprefixer

npx tailwindcss init

명령어 설치후 실행)

 

 

Tailwind 설정 파일 수정

tailwind.config.js 파일을 열고, Tailwind CSS가 적용될 파일 경로를 지정합니다

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

 

 

CSS 파일에 Tailwind 지시어 추가

src/index.css 파일을 생성하거나 기존 파일을 열어 다음 지시어를 추가합니다

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

 

 

메인 파일에서 CSS 파일을 import

src/main.tsx 파일에서 index.css를 import하여 Tailwind CSS를 적용합니다

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

 

 

Tailwind CSS 적용 확인

src/App.tsx 파일을 열어 Tailwind CSS 클래스를 사용하여 스타일을 적용해봅니다:

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-500">
        Tailwind CSS 적용 완료!
      </h1>
    </div>
  );
}

export default App;