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.jspostcss.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에서 나를 팔로우하세요.

    좋은 웹페이지 즐겨찾기