React에서 tailwind 간단하게 시작하기(@tailwind error해결법)

seunghw·2021년 8월 12일

Tailwind 공식문서를 참고하여 작성하였습니다.

Tailwind란?

Tailwind는 CSS framework이며 부트스트랩처럼 class명을 사용하여 각각의 스타일을 적용할 수 있습니다.사용자가 보다 맞춤형으로 인터페이스를 구축할 수 있게 만드는 것을 목표로 설계되었다고 합니다. 또한 다크모드나 플러그인 등 보다 넓은 폭에서 활용 가능하고 용량최적화에도 큰 도움을 줄 수 있다고 합니다.

처음엔 왜쓰지 싶다가도 실제로 써보니 꽤 괜찮았습니다.

아마 제가 이 tailwind를 계속 쓴다면 이유는 크게 세가지 정도 될 것 같아요!

class명을 정하지 않아도 된다.

이게 사소해보이는데 생각보다 신경써줘야하는 부분입니다. tailwind를 쓸 때에는 그럴 필요가 없어서 좋습니다.

코드가 짧아지고 한눈에 보인다.

이게 약어들로 이루어져 있어서 모를땐 이게 무슨 소리야 싶지만 조금 익히면 바로 한눈에 들어옵니다. 고치거나 바꿀때도 하나하나 css 찾아가서 고치지 않아도 되고요!

깔끔하고 자유도가 높다

이게 부트스트랩이랑 비교해보면 느낌이 확 오실 것 같아요. 생각보다 부트스트랩은 스타일을 내 입맛대로 바꿔도 조금 남아있는데 tailwinds는 그런게 거의 없는 느낌?을 받았습니다.

시작하기 전에 Tailwind CSS에는 Node.js 12.13.0 이상이 필요합니다.

1. CRA로 프로젝트 생성하기

CRA로 프로젝트부터 생성해줍니다.

npx create-react-app my-project
cd my-project

2. Tailwind CSS 설정하기

npm으로 tailwind를 설치해줍니다.

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

CRA에서는 아직 PostCSS 8을 지원하지 않기 때문에 위처럼 호환성 빌드를 설치해야한다고 합니다.

3. craco 설치 및 설정하기

Create React App에서는 기본적으로 PostCSS 구성을 재정의 할 수 없으므로 Tailwind를 구성 하려면 CRACO 도 설치해야 합니다.

npm install @craco/craco

이 다음에 아래처럼 pakage.json파일을 수정해줍니다.

이후에 이 프로젝트의 PostCSS 속성을 테일윈드를 쓸 수 있도록 설정해줘야 합니다. craco.config.js를 src 외부(프로젝트의 제일 바깥)에 생성한 후, 다음과 같이 본문을 작성합니다.

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

4. 구성파일 만들기

이제 tailwind.config.js파일을 똑같이 src 외부에 직접 생성합니다.

npx tailwindcss init

위처럼 작성하면 바로 만들어집니다.

5. 사용하지 않는 스타일을 제거해주는 tailwind

purge 배열의 값에 해당하는 파일들은 최적화를 통해서 사용하지 않는 스타일들을 제거해줍니다.

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

최적화와 관련된 가이드는 여기! 를 참고하시면 됩니다.

6. Tailwind 포함시키기

마지막으로 ./src/index.css에 아래와 같이 작성해주면 끝이 납니다!

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

7. 결과

같은 결과물을 각각 tailwind 쓴 코드와 쓰지 않은 코드를 비교해보면 다음과 같습니다.

tailwind 사용한 코드

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
      <div class="flex-shrink-0">
        <img class="h-12 w-12" src={logo} alt="ChitChat Logo" />
      </div>
      <div>
        <div class="text-xl font-medium text-black">ChitChat</div>
        <p class="text-gray-500">You have a new message!</p>
      </div>
    </div>

tailwind 사용하지 않은 코드

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>