tailwind CSS 사용법

1. tailwind 설치

npm install -D tailwindcss
한 후에 
npx tailwindcss init

2. tailwind.config.js 에서 초기 설정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"], // tailwind를 사용할 언어파일 확장자명 지정
  theme: {
    extend: {},
  },
  plugins: [],
}

3. CSS 파일 최상단에 tailwind 유틸리티 저장

index.css 파일 최상단에

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

4. 컴포넌트에서 클래스명 지정을 이용해서 스타일 적용

// width는 100%, flex속성 지정, padding은 4, text사이즈는 2xl, border-bottom을 zinc-600 색깔로 지정
<header className="w-full flex p-4 text-2xl border-b border-zinc-600 mb-4">

적용된 걸 확인할 수 있다.