기존 프로젝트에 Tailwind CSS를 추가하는 방법

이 게시물은 원래 Red Pixel Themes에 게시되었습니다.


프리랜서 개발자로서 저는 일반적으로 처음부터 프로젝트를 시작하는 것을 좋아합니다. 이렇게 하면 프로젝트의 모든 측면을 더 잘 제어하고 기술 선호도에 맞게 조정할 수 있습니다.

그러나 때로는 이미 구축된 프로젝트를 받고 클라이언트는 몇 가지 개선 사항을 원합니다. 이와 같은 프로젝트가 진행되면 일반적으로 이미 CSS 프레임워크와 일부 사용자 정의 스타일의 조합을 사용하고 있습니다.

문제는 제가 Tailwind CSS를 너무 좋아해서 모든 프로젝트, 심지어 기존 프로젝트에도 사용하고 싶지만 때때로 Tailwind 스타일 및 클래스가 프로젝트의 기존 CSS 스타일과 충돌할 수 있다는 것입니다.

이 문제를 해결하기 위해 제가 하는 일은 다음과 같습니다.

Tailwind CSS를 기존 스타일과 함께 사용하는 방법은 다음과 같습니다.

가장 먼저 해야 할 일

Tailwind 구성의 최상위 수준에 다음을 추가합니다.

module.exports = {
 corePlugins: {
     preflight: false,
 },
}

이 구성은 모든 요소를 ​​"재설정"하는 모든 base styles Tailwind uses을 제거하므로 유틸리티 클래스로 스타일을 지정하기가 더 쉽습니다. 이것은 새 프로젝트에 적합하지만 이러한 기본 스타일은 아마도 프로젝트 스타일과 충돌할 수 있으며 거의 ​​확실하게 이 스타일을 끄고 싶을 것입니다.

한 가지 주의할 점은 Tailwind 클래스를 사용하여 테두리를 추가할 때마다 테두리를 0으로 재설정하고 테두리 스타일 클래스도 추가해야 한다는 것입니다.

그래서 당신이 이것을 가지고 있다면 :

<div class="border-b border-gray-300"></div>

다음과 같이 만들고 싶을 것입니다.

<div class="border-0 border-b border-gray-300 border-solid"></div>

이는 Tailwind의 기본 스타일이 border-style: solid 및 border-width: 0 를 all elements 에 추가하기 때문입니다. 따라서 기본값(border-style )을 변경하려는 경우가 아니면 고유한 solid 클래스를 추가할 필요가 거의 없습니다. 특정 측면에 테두리를 추가하려면 먼저 테두리 너비(border-0 포함)를 재설정한 다음 테두리 측면 클래스(이 경우 border-b)를 추가해야 합니다.

다음은 Tailwind 클래스가 기존 CSS와 충돌하지 않는지 확인하는 것입니다.

접두사 기능 사용

Tailwind CSS의 제작자는 이미 이 시나리오를 생각했고 접두사 기능을 활성화했습니다. 이를 통해 모든 Tailwind의 클래스에 접두사를 추가할 문자열을 정의할 수 있습니다.

따라서 구성에 공통 접두사를 추가하는 경우:

module.exports = {
  prefix: 'tw-',
}

그러면 위 예제의 코드는 다음과 같습니다.

<div class="tw-border tw-border-gray-300 tw-border-solid"></div>

상위 클래스 추가

일반적으로 접두사 기능으로 충분하지만 특정 페이지 또는 사이트의 특정 섹션과 같은 특정 "범위"내에서만 순풍 클래스가 작동하기를 원하는 경우가 있습니다.

이를 위해 모든 Tailwind CSS 클래스에 접두사 선택기 또는 "상위 클래스"를 추가할 수도 있습니다.

이를 달성하기 위해 postcss-prefix-selector라는 PostCSS 플러그인을 사용할 수 있습니다.

먼저 설치를 하셔야 합니다

npm install postcss-prefix-selector
// or
yarn add postcss-prefix-selector

그런 다음 postcss.config.js 에서 다음과 같이 선호하는 상위 클래스를 정의합니다.

module.exports = {
 plugins: [
  require('tailwindcss/nesting'),
  require('tailwindcss'),
  require("postcss-prefix-selector")({
   prefix: '.parent-class', // you can change this whatever you want
  }),
}

이제 예제는 다음과 같이 작동합니다.

<div class="parent-class">
 <div class="tw-border tw-border-gray-300 tw-border-solid"></div>
</div>

이게 다야! 기존 프로젝트에서 Tailwind CSS를 사용하고 기존 스타일과의 충돌을 피하는 방법을 배웠기를 바랍니다.