기존 React 프로젝트에 tailwindcss를 추가하는 방법

React 프로젝트의 디렉토리로 이동하고 yarn 또는 npm을 사용하여 taillwindcss postcss-cli autoprefixer를 추가하십시오.

실 사용

yarn add tailwindcss postcss-cli autoprefixer -D

그런 다음 터미널에 이 명령을 입력하여 기본 구성을 만듭니다.

npx tailwind init tailwind.js --full

현재 디렉토리에 taillwind.js 파일이 생성됩니다.

Tailwind CSS는 사용자 정의가 가능한 저수준 CSS 프레임워크로, 무시하기 위해 싸워야 하는 성가신 독단적인 스타일 없이 맞춤형 디자인을 구축하는 데 필요한 모든 구성 요소를 제공합니다.

postcss.config.js 파일 생성

touch postcss.config.js

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

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

src 폴더에 asset 디렉토리 생성

mkdir ./src/assets

./src/assets에 taillwind.css라는 파일을 만듭니다.

touch ./src/assets/tailwind.css

tailwind.css를 입력합니다.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

다음과 같이 package.json 파일을 수정합니다.

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

애플리케이션을 시작할 때마다 main.css라는 파일이 생성됩니다.

그런 다음 App.js 파일(또는 애플리케이션의 루트 파일)에서 ./src/assets/main.css 파일을 가져옵니다.

import React from "react";
import ReactDOM from "react-dom";
import './assets/main.css';
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));