TailwindCSS 동작 이슈

문제 상황 !
TailwindCSS의 apply가 동작하지 않는 이슈

  • TailwindCSS에서 @apply 지시문을 사용해서 공통 유틸리티 패턴을 CSS 구성 요소 클래스로 쉽게 추출해서 새 컴포넌트로 확장시키기 좋음

    1
    2
    3
    4
    5
    6
    7
    <button class="btn btn-blue">
      Button
    </button>

    <button class="btn btn-gray">
      Button
    </button>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .btn {
      @apply font-bold py-2 px-4 rounded;
    }

    .btn-blue {
      @apply bg-blue-500 text-white;
    }
    .btn-blue:hover {
      @apply bg-blue-700;
    }

    .btn-gray {
      @apply bg-gray-400 text-gray-800;
    }
    .btn-gray:hover {
      @apply bg-gray-500;
    }

  • TailwindCSS는 PostCSS를 이용하는 라이브러리이고 React.js는 webpack을 번들러로 사용하므로 postcss-loader를 이용해 TailwindCSS를 번들링해준다.


  • postcss-loader를 설치하지 않으면 커스텀 스타일을 지정해 줄 때마다 npm run tailwind:css를 실행해야 한다.