vite에서 tailwind 시작하기

1. vite 설치

   • npm create vite@latest .
     
     

2. tailwind 설치

   • npm install tailwindcss
     
     

3. postcss와 autoprefixer 설치

   • npm install -D postcss autoprefixer

   • postcss는 css 후처리기입니다.

   • autoprefixer는 각 브라우저 호환을 위해 그에 맞는 벤더 프리픽서를 자동으로 붙여주는 도구입니다.
     
     

4. 구성파일 생성

   • npx tailwindcss init -p
     
     

5. tailwind.config.js 파일 수정

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

6. index.css에 코드추가

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