tailwind CSS in nextjs

1. 사용 방법
   a. 설치

npm install -D tailwindcss postcss autoprefixer
(또는 yarn add -D tailwindcss postcss autoprefixer)


npx tailwindcss init -p // tailwind.config.js 파일 생성

// tailwind.config.js 

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

//styles/globals.css;

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

b. Tailwind CSS IntelliSense extension 설치

c. 커스터마이징 (사용자 정의 스타일 추가)

d. 조건부 스타일링

<div
	className={`${isSelected ? 'bg-pz-bg-main' : 'bg-transparent'}`}
	onClick={onClick}
/>

2. 참고 자료
3. tailwindcomponents