React에서 Tailwindcss 시작하기

공식문서를 읽고 차근차근 따라해보았다.

01. Install Tailwind CSS

npm으로 tailwindcss를 설치한다. 그리고 tailwindcss init을 하면 tailwind.config.js 파일이 생성된다.

npm install -D tailwindcss
npx tailwindcss init

02. Configure your template paths

생성된 tailwind.config.js 파일에서 어떤 파일들이 tailwindcss 적용될 건지 설정한다.

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

03. Add the Tailwind directives to your CSS

index.css 상단에 tailwind 설정한다.

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

04. Start your build process

npm run start 혹은 yarn start로 앱을 다시 실행시키면 된다.