여러분, 안녕하세요,
오늘은 create react app으로 Tailwind CSS v2.0을 설정하는 방법을 보여드리겠습니다.

반응 프로젝트 만들기

따라서 반응 앱 만들기로 Tailwind CSS 설정을 시작하기 전에 먼저 프로젝트가 이미 있는 경우 아래 명령을 사용하여 반응 프로젝트를 만들어야 합니다. 다시 만들 필요가 없습니다.

npx create-react-app your_react_project_name

Tailwind CSS 설정

이제 반응 프로젝트에서 Tailwind CSS 설정을 시작할 수 있습니다.
비디오 자습서 보기를 선호하는 경우 here에서 확인할 수 있습니다.

npm 패키지 설치

먼저 npm을 사용하여 tailwindcss, postcss, autoprefixer 및 postcss-cli 패키지를 개발 종속성으로 설치해야 합니다.

PostCSS: PostCSS는 JS 플러그인으로 CSS를 변환하기 위한 도구입니다.

Autoprefixer: CSS를 구문 분석하고 공급업체 접두어를 CSS 규칙에 추가하는 PostCSS 플러그인입니다. CSS 포스트 프로세서입니다. 컴파일된 CSS 파일을 샅샅이 뒤져 코드를 확인한 후 -webkit 및 -moz와 같은 공급업체 접두사를 추가하거나 제거합니다.
postcss에 대해 더 알고 싶다면 그들의 documentation을 확인하십시오.

따라서 네 개의 npm 패키지를 모두 설치하려면 다음 명령을 실행해야 합니다.

npm install tailwindcss postcss autoprefixer postcss-cli -D

npm 패키지를 설치한 후 이제 src 폴더 안에 새 폴더를 만들고 이름을 assets로 지정한 다음 새로 만든 자산 폴더 안에 두 개의 파일 output.css 및 tailwind.css를 만들어야 합니다.
tailwind.css 파일을 열고 다음 코드를 붙여넣습니다.

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

이제 모든 tailwind 기본 구성을 보려면 이 명령을 실행하여 tailwind 구성 파일을 생성할 수 있습니다.

npx tailwindcss init --full

위의 명령은 모든 기본 tailwind 구성을 포함하는 tailwind.config.js 파일을 생성합니다. 이 파일을 직접 변경하지 않는 것이 좋습니다.

그런 다음 이 명령을 사용하여 tailwindcss-config.js 및 postcss.config.js 파일을 만듭니다.

npx tailwindcss init tailwindcss-config.js -p

tailwindcss-config.js 파일은 다음과 같습니다.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

이 파일에서 색상, 글꼴 등과 같은 기본 tailwind CSS 구성을 확장할 수 있습니다.

이제 postcss.config.js 파일을 열고 이 파일로 tailwindcss 행을 변경하십시오.
tailwindcss: { config: './tailwindcss-config.js' },
전체postcss.config.js 파일은 다음과 같습니다.

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
    autoprefixer: {},
  },
}

이제 package.json 파일을 열고 모든 스크립트 파일을 이 파일로 바꿉니다.

  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/output.css"
  }

output.css 파일 가져오기

이제 다음과 같이 app.js 파일 내에서 output.css 파일을 가져와야 합니다.
import './assets/output.css'
그리고 실행
npm start
축하합니다! 반응 프로젝트에서 Tailwind CSS v2.0을 성공적으로 설정했습니다.

이 블로그를 읽어주셔서 감사합니다

블로그가 도움이 되셨다면 뉴스레터를 구독하시면 새 게시물이 게시될 때마다 가장 먼저 알림을 받으실 수 있습니다.

피드백과 제안을 댓글로 남겨주세요.

Check out my youtube channel

감사합니다