Vite + Yarn + Typescript + React 환경에서 Tailwind CSS 설치

Tailwind CSS 설치 & 초기화

📎 Tailwind CSS 설치

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

다양한 웹 브라우저에서 몇몇의 CSS가 안 먹힐 때가 있다;; 그럴 땐 접두어(Vendor Prefix)를 넣어줘서 변환 효과를 적용해야하는데!
Tailwind CSS v2 부터는 -webkit- ← 이런 Vendor Prefix(공급업체 접두사) 문제를 해결해 주는 PostCSS의 autoprefixer를 함께 사용해야 한다.

📎 Tailwind CSS 초기화

npx tailwind init -p

postcss.config.js 파일에 다음과 같이 입력

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

tailwind.config.js 파일에 다음과 같이 입력

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#1BD7BE', // 메인 색상
        },
      },
    },
  },
  plugins: [],
};

src/index.css에 다음과 같이 입력

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

이렇게 추가하고, @tailwind 부분에 빨간 줄이 떴었는데 PostCSS Language Support 확장 프로그램 설치해주니 해결되었다.