최근에 CRA (Create-React-App) 상용구로 부트스트랩 된 React 프로젝트에서 TailwindCSS를 사용해 보려고 했지만 CRA 추상 구성으로 TailwindCSS를 설정하는 데 어려움이 있었습니다. 사용자 지정 구성을 만들려면 구성을 사용하여 땜장이에 완전히 액세스 할 수 있도록 Create-React-App을 꺼내야 합니다. 이는 훨씬 더 지루한 설정을 의미하며 문제가 발생하면 스스로 해결해야 합니다. 나는 그것을 조금 어지럽히고 그것을 끝내는 더 좋은 방법을 찾았습니다.

https://blog.logrocket.com/create-react-app-and-tailwindcss/ 

이 포스트에서는 Create-React-App을 꺼내지 않고도 반응 CRA 프로젝트 내에서 TailwindCSS를 작동 시키는 쉬운 방법을 보여줄 것입니다.

이 튜토리얼에서는 TailwindCSS 및 React JS에 대한 기본 지식이 있다고 가정합니다.

전제 조건 : 

• npm 작동 방식에 대한 지식
• Node.js 8.0 이상 및 npm 5.2 이상 설치
• React JS 및 TailwindCSS에 대한 기본 이해

시작하기 

먼저 터미널을 열고 다음 명령을 입력하여 새 프로젝트를 만듭니다.

#Using NPM
$ npx create-react-app tailwindreact-app

#Using Yarn
$ yarn create react-app tailwindreact-app

이것은 필요한 모든 구성과 빌드 파이프 라인 (Webpack, Babel)으로 새로운 반응 앱을 부트스트랩합니다.

작업 폴더로 이동합니다.

cd tailwindreact-app

다음, Tailwind 설치:

# Using npm
npm install tailwindcss --save-dev

# Using Yarn
yarn add tailwindcss --dev

기본 구성 스캐 폴드 작성

npx tailwind init tailwind.js --full

이 명령은 프로젝트의 기본 디렉토리에 tailwind.js를 작성하며 파일은 모든 Tailwind의 기본 구성을 포함합니다.

다음과 같이 Autoprefixer 및 PostCSS-CLI를 설치하십시오.

npm install postcss-cli autoprefixer --save-dev
or
yarn add postcss-cli autoprefixer --save-dev

PostCSS 설명서에 명시된 바와 같이 :

PostCSS는 JS 플러그인으로 스타일을 변환하는 도구입니다. 이 플러그인은 CSS를 lint하고 변수 및 믹스인을 지원하며 향후 CSS 구문을 변환하고 인라인 이미지 등을 제공 할 수 있습니다. 

Autoprefixer는 PostCSS 플러그인이지만 기본적으로 CSS를 구문 분석하고 컴파일 된 CSS 규칙에서 불필요한 공급 업체 접두사를 추가 / 제거합니다. 애니메이션, 전환, 변환, 그리드, 플렉스, 플렉스 박스 등에 접두사를 추가 할 수 있습니다.

PostCSS를 구성하는 방법 

기본 디렉토리에서 수동으로 또는 다음 명령을 사용하여 PostCSS 구성 파일을 작성하십시오.

$ touch postcss.config.js

PostCSS 파일에 다음 코드 줄을 추가하십시오.

//postcss.config.js
 const tailwindcss = require('tailwindcss');
 module.exports = {
     plugins: [
         tailwindcss('./tailwind.js'),
         require('autoprefixer'),
     ],
 };

src 폴더 안에 폴더를 생성하고 이름을 styles로 지정하면 모든 스타일이 저장됩니다. 해당 폴더 안에 tailwind.css 및 index.css 파일을 만듭니다.

index.css 파일은 tailwind의 기본 스타일과 구성을 가져 오는 위치이며 tailwind.css는 index.css의 컴파일 된 출력을 포함합니다.

tailwind의 구성 요소, 유틸리티 및 기본 스타일을 앱에 주입하는 방법 

index.css 파일에 다음을 추가하십시오.

//index.css

@tailwind base;

@tailwind components;

@tailwind utilities;

@tailwind는 기본 기본 스타일, 구성 요소, 유틸리티 및 사용자 지정 구성을 주입하는 데 사용되는 tailwind 지시문 입니다.

@tailwind base — Tailwind의 기본 스타일을 주입합니다.이 스타일은 Normalize.css와 일부 추가 기본 스타일의 조합입니다.

Preflight에서 적용한 모든 스타일에 대한 자세한 내용은 이 스타일 시트를 참조하십시오.

postcss-import를 사용하는 경우 이 가져 오기를 대신 사용하십시오. 

@import "tailwindcss/base";

@tailwind components — tailwind 구성 파일에 정의 된 플러그인에 의해 등록 된 모든 컴포넌트 (버튼 및 폼 요소와 같은 재사용 가능한 작은 스타일) 클래스를 삽입합니다.

postcss-import를 사용하는 경우 이 가져 오기를 대신 사용하십시오.

@import "tailwindcss/components"; 

구성 요소 가져 오기 아래에 사용자 정의 구성 요소 클래스를 추가 할 수 있습니다. 기본 유틸리티 보다 먼저 로드하여 유틸리티가 여전히 재정의 할 수 있도록 합니다.

예를 들면 다음과 같습니다.

.btn { ... }
.form-input { ... }

또는 전 처리기 또는 postcss-import를 사용하는 경우 :

@import "components/buttons";
@import "components/forms";

@tailwind 유틸리티 — 구성 파일을 기반으로 생성 된 모든 Tailwind 유틸리티 클래스 (기본 및 자체 유틸리티 포함)를 주입합니다. 

postcss-import를 사용하는 경우 이 가져 오기를 대신 사용하십시오.

@import "tailwindcss/utilities";

유틸리티 가져 오기 아래에는 Tailwind와 함께 제공되지 않는 사용자 정의 유틸리티를 추가 할 수 있는 위치가 있습니다.

예를 들면 다음과 같습니다.

.bg-pattern-graph-paper { ... }

.skew-45 { ... }

또는 전 처리기 또는 postcss-import를 사용하는 경우 :

@import "utilities/background-patterns";
@import "utilities/skew-transforms";

Tailwind는 빌드시 이러한 모든 지시문을 바꾸고 생성 된 CSS로 바꿉니다.