React에서 TailwindCSS v3.0 시작하기

TailwindCSS를 사용해야 하는 이유

Utility-First CSS 프레임워크에 대해 원하는 것이 무엇이든 말하세요. 전통적인 CSS는 각 구성 요소에 특정 선택기를 제공하여 코드 중복을 초래하는 "모놀리식"작성을 위해 설계되었습니다. 구성 요소를 분할하고 추상화하는 현재 공간에서는 다소 구식인 것 같습니다. BEM과 같은 기술은 이러한 피해 중 일부를 완화하기 위해 발명되었습니다.

TailwindCSS는 발생할 수 있는 거의 모든 스타일링 사용 사례를 처리하기 위해 CSS 클래스를 자동으로 생성하는 최고의 유틸리티 우선 CSS 프레임워크 중 하나입니다. 기본 스케일을 기반으로 하는 내장 디자인 시스템을 통해 모든 간격, 여백 및 패딩이 일관되고 아름답습니다. 몇 시간 동안 계속할 수 있지만 TailwindCSS를 사용하는 방법에 대해 알아보겠습니다.

반응 앱 만들기

아래 명령을 실행하여 새 React 앱을 시작합니다.

npx create-react-app tailwindcss-app

TailwindCSS 설치

TailwindCSS는 다음 npm 패키지에 의존합니다.

TailwindCSS - TailwindCSS 프레임워크

PostCSS - JavaScript 기반 CSS 변환 도구

Autoprefixer - 공급업체 접두사를 자동으로 추가하는 CSS 구문 분석기

세 가지 모두 다음 명령으로 설치할 수 있습니다.

npm install -D tailwindcss postcss autoprefixer

TailwindCSS 구성 만들기

TailwindCSS 및 PostCSS에 대한 구성은 아래 명령으로 생성해야 합니다.

npx tailwindcss init -p

이렇게 하면 tailwind.config.js 및 postcss.config.js 두 파일이 생성됩니다.

다음으로 코드 소스를 tailwind.config.js 구성에 추가합니다.

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // Add code source
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.config.js는 기존 스타일을 정의custom styles하거나 확장하는 데에도 유용합니다.

TailwindCSS 지시문 가져오기

TailwindCSS 스타일을 프로젝트로 가져와야 합니다. 대부분의 기본 React 프로젝트에는 전체 프로젝트에 적용되는 index.css 스타일이 포함되어 있습니다.

src /
 | - App.js
 | - App.css
 | - index.css
   ...

한 번만 가져와야 하므로 여기에서 TailwindCSS를 가져옵니다.

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

일부 TailwindCSS 코드 실행

일부 코드와 TailwindCSS 스타일을 App.js 에 추가해 보겠습니다.

function App() {
  return (
    <section className="px-4 py-24 mx-auto max-w-7xl">
      <div className="grid items-center w-full grid-cols-1 gap-0 mx-auto lg:grid-cols-11 lg:gap-24 xl:w-11/12">
        <div className="col-auto text-center md:col-span-7 lg:text-left">
          <h1 className="mb-4 text-3xl font-bold leading-tight text-gray-900 md:text-4xl md:leading-none tracking-none md:tracking-tight">Ready
            to start your TailwindCSS jurney?</h1>
          <p className="mb-10 text-lg font-light text-gray-500 md:text-xl md:tracking-relaxed md:mb-4">
            Your move!
            Yu-Gi-Oh!
            Your move!
            Yu-Gi-Oh!
            It's time to du-du-du-du-dududududududuel!
            Yu-Gi-Oh! (-Oh! -Oh! -Oh!)
            Your move!
            Yu-Gi-Oh is king of games!
            It's time to du-du-du-du-dududududududuel!
            Yu-Gi-Oh!
          </p>
        </div>
        <div className="col-auto md:col-span-4">
          <form className="mb-6 border-0 rounded-lg shadow-xl">
            <div className="cursor-pointer px-6 py-4 text-center bg-blue-500 text-white font-bold rounded">
              Get started
            </div>
          </form>
        </div>
      </div>
    </section>

  );
}

export default App;

이제 아래 명령으로 React 앱을 시작하십시오.

npm run start

아래에서 비슷한 것을 볼 수 있습니다.

결론

TailwindCSS 프로젝트를 시작할 준비가 되었기를 바랍니다. 읽어 주셔서 감사합니다!

Twitter 또는 내 블로그gregorygaines.com에서 나를 팔로우하세요.