[23.07.10] tailwind css 시작 방법

공식 문서

설치 명령어

npm install -D tailwindcss postcss autoprefixer
// 크로스브라우징 대응

npx tailwindcss init -p

템플릿 경로 설정

// tailwind.config.js 📂

module.exports = {
  // 템플릿 파일의 경로 설정 👀
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

커스터마이징

// tailwind.config.js 📂

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

Tailwind 지시문 CSS에 추가

/* index.css 📂 */

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