Tailwind CSS 설치 및 설정

설치 참고 문서 : https://tailwindcss.com/docs/guides/vite

 

1. Tailwind CSS 라이브러리 추가 및 설정 파일 생성

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

2. 명령어 실행 후 tailwind.config.js 파일이 생성되면 content 배열 내 다음과 같이 코드 추가

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

     
3. src/index.css에 다음 코드 추가

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

4. src/App.js에 다음과 같이 className에 스타일을 적용하여 Tailwind CSS 적용 여부 확인

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

5. Tailwind CSS 자동 완성 확장 프로그램 설치