(deprecated)[FE] 🌬tailwindcss로 더 빠른 페이지 만들기(with React)

 

 

 

Tailwind CSS

 

 

 

Ref. 📗

 

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

 

 

 

 

 

  최근 React 와 함께 사용하는 스타일 라이브러리/프레임워크가 정말 다양해졌습니다. 대표적으로 styled-components, emotion, Tailwind css 등이 있는데 오늘은 Tailwind 에 대해서 알아보려고 합니다! 먼저, Tailwind 의 장점은 tailwind 홈페이지에서 볼 수 있듯이

Rapidly build modern websites without ever leaving your HTML. 
"HTML을 떠나지 않고도 모던 웹 사이트를 빠르게 구축 할 수 있습니다."

 

와 같이 제공하는 문서의 내용을 어느정도만 파악한다면 프로젝트에 추가적인 CSS를 적용하지 않고도 스타일링을 할 수 있습니다. 그래서 Framework 이름도 Tailwind(순풍: 등 뒤에 부는 바람)라고 짓지 않았을까하는 예상도 해봅니다.(Tailwind를 사용하면 등 뒤에서 부는 바람 처럼 더 빨리 걷게 해준다는 의미...?)

 

 

 

 

  Tailwind를 사용하면 기존의 CSS를 적용할 때 수없이 고민하던 Class Name(클래스 명)을 명명에 대한 일관성과 의미론적 고민을 하지 않아도 되며 문서를 통해서 쉽게 원하는 스타일을 적용할 수 있습니다. 이렇게 손쉬운 스타일링 방법을 제공하는 스타일 라이브러리인 tailwind css 에 대해서 알아봅시다. 😁

 

우리는 React와 함께 사용할 것이며 React 이외에도 다양한 Framework 위에서도 잘 동작합니다.

 

 

 

 

 

 

 

Create React App으로 Tailwind CSS 설치하기 🤖

 

  React 프로젝트를 만들어주세요.

 

  기본적으로 Tailwind는 Node 12.13.0 이상에서 지원됩니다.

npx create-react-app my-project
cd my-project
npm start # or yarn start

 

  React 프로젝트가 잘 작동된다면 Tailwind를 설정합니다.

 

 

 

 

npm을 통한 Tailwind 설치

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

  굉장히 여러가지 것들을 설치합니다. 이유는 우리는 CRA를 통해 React 프로젝트를 설치했는데 아직 CRA에서 PostCSS8을 지원하지 않아 현재로서는 Tailwind CSS v2.0 PostCSS7 호환성 빌드를 함께 설치해주어야 되기 때문입니다.

 

 

 

 

CRACO 설치하기

  갑자기 왜 CRACO를 설치하는지 궁금하시죠? CRACO에 대해서 간단하게 설명하자면 CRA에서 eject 를 하지 않아도 root 폴더에 craco.config.js를 추가해서 eslint, Babel, PostCSS 등을 쉽게 설정할 수 있도록 해줍니다.

 

 

  따라서 우리는 CRA 를 사용하기 때문에 프로젝트를 쉽게 구성하기 위해서 CRACO 를 사용합니다.(물론 공식문서에도 이를 설명합니다.)

 

 

 

 

  CRACO 를 설치합니다.

npm install @craco/craco

 

 

 

  설치가 완료되면 아래와 같이 scripts 를 업데이트 해주세요.

// package.json
{
    // ...
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
    },
}

 

 

 

  다음은 프로젝트의 root에서 croco.config.js 를 추가해주고 아래 코드를 추가해주세요.

// craco.config.js
module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

 

 

 

 

구성 파일 만들기

  다음으로 tailwind.config.js 를 만들어 봅시다.

 

  다음 명령어를 실행시키면 tailwind.config.js 가 root 디렉토리에 생성됩니다.

npx tailwindcss init

 

 

 

my-project/tailwind.config.js

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

 

 

 

그리고 purge Tailwind에 사용되지 않는 스타일의 모든 구성요소를 설정합니다. 아래 코드를 참고하세요.

// tailwind.config.js
  module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

이에 대한 최상의 성능을 위해서는 프로덕션 최적화에 대한 가이드를 참고하세요!

 

 

 

 

 

 

 

프로젝트에서 Tailwind 사용하기

  프로젝트에서 Tailwind를 사용해 보겠습니다.

 

./src/index.css 의 최상단에 아래 코드를 추가합니다. 추가적인 참고 가이드 - 새로운 유틸리티 추가

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

 

이제 우리는 Tailwind 를 사용하기 위한 모든 준비가 끝났습니다.

 

 

 

 

 

 

사용방법 🚀

  간단 명료하게 설명하겠습니다. Docs를 보고 따라하세요 😆Documentation - Tailwind CSS

 

  간단한 예시를 들어보자면 Container 관련 CSS를 적용하고 싶다면 아래와 같이 사용합니다.

<div class="container mx-auto px-4">
  <!-- ... -->
</div>

 

  <div> class의 continer, mx-auto, px-4 는 무슨 의미일까요?

 

  유추해본다면 container 형태에 중앙 배치하고 px은 4px이 아닐까요?

 

  정답은 container 클래스를 사용(container)하며 중앙정렬(mx-auto)하고 4px의 수평 패딩(px-4)을 추가한다는 의미입니다. TailWind는 이렇게 직관적인 클래스 명으로 스타일링을 가능하게 합니다.

 

 

 

 

  지금까지 알아본 것 처럼 Tailwind를 사용하면 프로젝트에 추가적인 CSS를 작성하지 않고도 손쉽게 스타일링이 가능합니다. 사용방법에 대해서 자세하게 적지 않은 이유는 너무나 친절한 공식 문서가 있기 때문에 추가하지 않았으며 적용하고 싶은 스타일을 찾아보는 것만으로도 쉽게 스타일을 적용 가능합니다.

 

 

 

 

 

 

Tailwind 원리

 

  Tailwind library를 열어보면 이 처럼 config들이 미리 설정되어 있고 클래스 명에 따라 이를 조합하여 CSS를 적용하는 방식을 확인할 수 있습니다.