React로 Tailwind CSS를 설정하는 방법

Tailwind CSS는 맞춤형 디자인을 신속하게 구축하기 위한 유틸리티 우선 CSS 프레임워크입니다. Bootstrap 및 Material UI와 같은 미리 정의된 구성 요소를 사용하는 대신 CSS 도우미 클래스와 함께 제공되며 이러한 클래스를 사용하면 사용자 지정 디자인을 쉽게 만들 수 있습니다.

나는 약간의 부업 프로젝트를 진행 중이며 약간 과잉이긴 하지만 Tailwind CSS를 사용하기로 결정했습니다. 다른 CSS 프레임워크와 다르기 때문에 약간의 학습 곡선이 있지만 요령을 터득하면 완전히 새로운 개발 경험을 제공합니다.

React/TypeScript 프로젝트에 추가

이것은 React + TypeScript 프로젝트가 될 것이며 아래에 표시된 이 접근 방식을 사용하면 Tailwind를 사용하기 위해 CRA를 꺼낼 필요가 없습니다.

먼저 다음을 실행하여 프로젝트를 생성해 보겠습니다.
create-react-app react-ts-tailwind-example —typescript
그 다음에
cd react-ts-tailwind-example
루트 디렉토리에 있으면 다음을 실행하여 종속성 패키지를 설치하십시오.
yarn add tailwindcsstailwindcss 패키지는 프로젝트에 Tailwind를 추가하고 자체 CLI 도구를 활성화합니다.

다음 단계는 실제로 사용할 수 있도록 프로젝트 내에서 Tailwind를 설정하는 것입니다. 이를 위해 먼저 다음 명령을 실행하여 구성 파일을 생성합니다.
npx tailwind init
완료되면 다음과 같이 생성됩니다tailwind.config.js.

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

플러그인과 테마 설정 등을 저장하는 곳이지만 이번에는 건드리지 않겠습니다.

그런 다음 src/tailwind.css 파일을 만들고 다음을 추가해야 합니다.

/* src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base

이 라인은 기본적으로 Normalize.css와 Tailwind에서 제공하는 몇 가지 추가 스타일인 Tailwind의 기본 스타일을 주입하는 것입니다.

@tailwind components

이는 tailwind.config.js 파일에 있는 플러그인에 의해 등록된 구성 요소 클래스를 주입합니다.

@tailwind utilities

Tailwind CSS에서 제공하는 모든 유틸리티 클래스를 주입합니다. 이들은 또한 구성 파일을 기반으로 생성됩니다.

CRA 빌드 시스템에서 꺼내지 않고 Tailwind를 사용하려면 시작 및 빌드 스크립트 전에 Tailwind를 빌드하는 스크립트를 추가해야 합니다. 이를 위해 package.json를 열고 다음과 같이 스크립트를 업데이트합니다.

// package.json
"scripts": {
  "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
  "prestart": "npm run build:tailwind",
  "prebuild": "npm run build:tailwind",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

build:tailwind 스크립트는 이전에 생성한 src/tailwind.css를 찾아 컴파일한 다음 출력을 src/tailwind.output.css로 저장합니다. prestart 및 prebuild 를 추가했으므로 기존 start 및 build 스크립트보다 먼저 실행됩니다. 실제 start 또는 build가 발생하기 전에 출력 파일이 생성되도록 합니다.

마지막으로 src/index.tsx 파일에서 위의 스크립트에 의해 생성된 tailwind.output.css 파일을 다음과 같이 가져올 수 있습니다.

// src/index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import './tailwind.output.css'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

*또한 이 출력 파일을 .gitignore에 추가하는 것을 잊지 마십시오. 그렇지 않으면 큰 css 파일을 repo에 커밋하게 됩니다!

이제 프로젝트가 Tailwind CSS에 의해 강화되었습니다. official docs의 예를 들어보고 실제로 작동하는지 확인하기 위해 몇 가지 구성 요소 클래스와 함께 입력 필드를 추가해 보겠습니다.

// src/App.js
import React from 'react'

const App: React.FC = () => {
  return (
    <div className="App">
      <input className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block appearance-none leading-normal m-10" type="email" placeholder="[email protected]">
    </div>
  )
}

export default App

yarn start를 실행하면 브라우저에 다음과 같은 입력이 표시되어야 합니다.



자! 이것은 매우 빠른 설정이며 React 프로젝트에서 설정하는 방법만 다루었습니다. Tailwind에 대해 자세히 알아보려면 Tailwindofficial site를 확인하세요. 이것이 React 프로젝트에서 Tailwind를 사용하려는 사람에게 도움이 되기를 바랍니다.

읽어 주셔서 감사합니다. 방금 읽은 내용이 마음에 들면 공유해 주세요!