Tailwind CSS로 create-react-app 설정

최근에는 Bootstrap 및 Bulma 과 같은 완전한 툴킷 대신 유틸리티 우선 CSS 프레임워크를 사용하여 프런트 엔드 코드를 작성하는 데 재미를 느끼고 있습니다. CSS를 처음부터 직접 작성할 필요 없이 페이지 구성 요소를 즉시 빌드하고 사용자 지정할 수 있습니다. Tailwind CSS이 다양한 커뮤니티와 플랫폼에서 받고 있는 관심을 보고 개인 프로젝트 중 하나에서 시도하기로 결정했습니다. 사용하기 쉽고 문서가 정말 직관적이기 때문에 스타일링 페이지가 더 재미있어졌습니다.

구성 요소 친화적이기 때문에 단일 페이지 애플리케이션과 얼마나 잘 맞는지 알아보기 위해 create-react-app과 함께 다음 프로젝트에서 사용해 보았습니다. 😎

이제 Tailwind CSS를 사용하여 나만의 create-react-app 프로젝트를 설정하도록 도와드리겠습니다. 시작하자!

먼저 create-react-app으로 새로운 ReactJS 프로젝트를 생성해 봅시다.

npx create-react-app your-app-name

다음으로, 나중에 실제 스캐폴딩을 건드리지 않고도 새로운 create-react-app 프로젝트에 Tailwind CSS 모듈을 쉽게 설치할 수 있습니다. npm에서 다음 명령을 실행하십시오.

npm install tailwindcss --save-dev

Tailwind CSS를 설치한 후 다음 명령을 사용하여 액세스할 수 있고 익숙해지기 쉬운 자바스크립트 형식의 구성 파일을 생성해야 합니다.

npx tailwind init tailwind.js

원하는 파일 이름을 사용할 수 있지만 기본 이름tailwind.js은 일반적으로 따라하기 좋은 설명서의 권장 사항입니다.

그런 다음 문서에서 제안하는 대로 Tailwind를 빌드 체인에 플러그인PostCSS으로 추가합니다. 다음을 통해 이러한 피어 종속성을 설치합니다.

npm install postcss-cli autoprefixer --save-dev

그런 다음 내부 경로를 전달하여 Tailwind를 플러그인으로 추가할 파일postcss.config.js을 만들어야 합니다.

var tailwindcss = require('tailwindcss');

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

tailwind.js 및 postcss.config.js 구성 파일은 디렉터리의 모든 부분에 포함될 수 있지만 지금은 프로젝트의 루트 수준에 넣습니다.

다음으로 CSS에서 Tailwind를 사용할 수 있도록 진입점을 만들어야 합니다. 이 경우 항상 문서의 recommendation을 사용합니다.

아래 코드를 복사하여 프로젝트의 tailwind.css 디렉토리에 있는 /src라는 이름의 새 파일 또는 그 안에 있는 다른 사용자 정의 폴더에 붙여넣어 정적 및 사용자 정의 스타일을 생성된 스타일과 분리하십시오. 제 경우에는 사용자 정의/styles 디렉토리를 만들었습니다.

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/base";
 */
@tailwind base;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

이 코드를 붙여넣고 파일을 저장한 후 npm 스크립트를 병렬 또는 순차적으로 실행하기 위한 도구로 npm-run-all를 설치합니다. 이것은 실제 요구 사항은 아니지만 특히 Windows 사용자에게 권장합니다. 이 CLI 도구는 크로스 플랫폼에서 스크립트를 실행할 수 있도록 도와줍니다.

npm install npm-run-all --save-dev

다음으로 CSS를 빌드하고 로컬 create-react-app 서버를 시작하도록 package.json 파일을 구성해야 합니다. scripts 섹션은 이제 다음과 유사하게 표시됩니다.

"scripts": {
    "start": "npm-run-all --parallel watch:css start:react",
    "build": "npm-run-all build:css build:react",
    "build:css": "postcss src/styles/tailwind.css -o src/index.css",
    "watch:css": "postcss src/styles/tailwind.css -o src/index.css -w",
    "start:react": "react-scripts start",
    "build:react": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

이제 npm 내에서 npm start 스크립트를 실행하여 파일을 빌드하고 서버를 시작할 수 있습니다.

npm start

마지막으로 Tailwind CSS가 구성 요소 내에서 작동하는지 테스트하려면 생성된 파일index.css을 가져와 JSX 내의 Tailwind 문서에서 유틸리티 클래스를 다음과 같이 추가하면 됩니다.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

const App = () => {
  return <div className="bg-blue-100">Hello World!</div>
};

ReactDOM.render(<App />, document.querySelector("#root"));

브라우저에서 보이는 방법은 다음과 같습니다!



이것은 Screely 으로 만든 300% 줌 스크린샷입니다.



그것은 포장입니다! 읽어 주셔서 감사합니다. 이 설정을 제대로 소개할 수 있었으면 좋겠습니다. 😄