NextJS로 tailwind시작하기

1. yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

2. yarn tailwindcss init -p

tailwind.config.js 파일이 생김. 

3. 아래 붙여넣음. 

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

이렇게 하면 최종 프로덕션 빌드에서 모든 사용하지 않는 스타일을 효과적으로 제거하여 파일 크기를 크게 줄일 수 있다고함.

4. global.css에 아래 코드 첫번째 줄에 넣음. 

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

 

5. 완료!