TailwindCSS #0 | 초기 세팅

설치

$ npm i -D tailwindcss postcss autoprefixer

설정

1. $ npx tailwindcss init -p
2. postcss.config.js, tailwind.config.js 파일 생성됨
   • postcss.config.js 파일은 건드리지 않습니다.
3. tailwind.config.js 파일 코드 수정

// 초기 코드

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

// 수정한 코드

module.exports = {
  // 어디서 사용할지
  // pages, components 디렉토리(**)의 모든파일(*) 해당확장자
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. globals.css 코드 수정

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