Tailwind CSS home page
  1. 설치
  2. Create React App로 Tailwind CSS 설치하기

Create React App은 커스텀 PostCSS 설정을 지원하지 않으며, `postcss-import`와 같은 PostCSS 생태계의 많은 중요한 도구와 호환되지 않습니다.

우리는 Vite, Parcel, Next.js, 또는 Remix 사용을 강력히 추천합니다. 이들은 Create React App과 동등하거나 더 나은 개발자 경험을 제공하며, 더 많은 유연성을 제공하여 Tailwind와 PostCSS를 어떻게 설정할지 더 많은 제어권을 줍니다.

  1. 프로젝트 생성

    아직 설정하지 않았다면 Create React App v5.0+를 사용해 새로운 React 프로젝트를 생성하세요.

    Terminal
    npx create-react-app my-projectcd my-project

  2. Tailwind CSS 설치

    npm을 통해 tailwindcss를 설치하고, init 명령어를 실행해 tailwind.config.js 파일을 생성하세요.

    Terminal
    npm install -D tailwindcssnpx tailwindcss init

  3. 템플릿 경로 설정

    tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가하세요.

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

  4. CSS에 Tailwind 지시자 추가

    Tailwind의 각 레이어에 대한 @tailwind 지시자를 ./src/index.css 파일에 추가하세요.

    index.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 빌드 프로세스 시작

    npm run start로 빌드 프로세스를 실행하세요.

    Terminal
    npm run start

  6. 프로젝트에서 Tailwind 사용 시작

    Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링하세요.

    App.js
    export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}