반응 프로젝트와 함께 Tailwind CSS를 설치하는 방법

소개: Tailwind CSS는 제한된 시간 내에 원하는 방식으로 웹사이트를 디자인할 수 있는 클래스 기반 UI CSS 프레임워크입니다. 반응 프로젝트에 포함시키는 것이 꽤 까다롭다는 것을 알았습니다.
이제 몇 가지 단계에 따라 프로젝트에 Tailwind CSS를 설치하는 방법을 살펴보겠습니다. 시작하겠습니다...

ReactJs & tailwind 스타터의 GitHub 저장소에 link을 추가하겠습니다. 번거로운 설정 없이 복제하고 시작할 수 있습니다.
Node.Js 12+ 및 React CLI를 설치했는지 확인하십시오.

1. React 앱 만들기

create-react-app을 통해 React 프로젝트를 생성하고 새로 생성된 디렉토리에 cd하는 것으로 시작합니다. 이미 완료했다면 건너뛸 수 있습니다.

$ npx create-react-app my-project
$ cd my-project

2. Tailwind 설치

npm(노드 패키지 관리자)을 통해 Tailwind 설치
Node.js 12 이상이 필요합니다.

다음을 사용하여 다른 종속성과 함께 tailwind 설치

$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

react는 postcss8을 지원하지 않으므로 postcss7을 설치하겠습니다.

CRACO 설치
CRACO는 create-react-app을 위한 쉽고 이해하기 쉬운 구성 레이어인 Create React App Configuration Override입니다. Craco는 PostCSS 재정의에 사용됩니다.

$ npm install @craco/craco

설치가 완료되면 package.json e에서 아래와 같이 '스크립트'를 업데이트합니다.

"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
   "eject": "react-scripts eject"
 },

다음으로 프로젝트 루트에 'craco.config.js'를 만들고 다음 줄을 추가합니다.

module.exports = {
   style: {
     postcss: {
       plugins: [
         require('tailwindcss'),
         require('autoprefixer'),
       ],
     },
   },
 }

Tailwind 구성 파일 생성:
이제 tailwind.config.js 파일을 생성해 보겠습니다.

npx tailwindcss init

이 명령은 루트 디렉터리에 tailwind 구성 파일을 만듭니다.
프로덕션에서 사용하지 않는 스타일을 제거하려면 다음 줄을 교체하십시오.

module.exports = {
 purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
 darkMode: false, // or 'media' or 'class'
 theme: {
   extend: {},
 },
 variants: {
   extend: {},
 },
 plugins: [],
}

설치가 완료되었습니다! 프로젝트에서 순풍 클래스를 사용하는 방법을 알아보겠습니다.

Tailwind CSS 사용

CSS에 Tailwind 포함
이제 index.css를 열고 tailwind base, 구성 요소, 유틸리티 가져오기로 교체하십시오.

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

index.css를 포함합니다.
상위 index.js 파일에 포함하거나 가져오기index.css해야 합니다.

import './index.css';

이제 끝났습니다. Tailwind CSS를 사용하여 구성 요소를 만들고 테스트를 위해 index.js에 추가합니다.
다음을 사용하여 프로젝트 실행

`npm run start`

이 기사가 도움이 되었기를 바랍니다. 이것은 dev.to에서 나의 첫 글쓰기 경험입니다.

행복한 코딩!