Tailwind CSS에서 모든 클래스를 생성하는 방법

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


Tailwind에 JIT 엔진이 없었을 때 프레임워크는 개발 시 모든 클래스를 생성하고 프로덕션 시 사용되지 않는 CSS만 제거해야 했습니다. 이것이 우리가 퍼지라고 부르던 것입니다.

요즘에는 JIT 엔진이 필요한 CSS를 정확하게 출력하기 때문에 더 이상 필요하지 않습니다.

그러나 빌드 프로세스를 사용하지 않으려는 것과 같은 일부 사용 사례의 경우 단일 CSS 파일에서 모든 클래스를 생성할 수 있습니다.

수신 허용 목록 사용

이를 달성하기 위해 문서에서 safelist option을 살펴봐야 합니다. 이 문서는 마크업에 존재하지 않더라도 항상 생성하려는 클래스 배열을 가져옵니다.

이제 이것은 우리가 원하는 대로 즉시 작동하지 않지만 safelist의 멋진 점은 Regular Expression(또는 Regex)도 받아들인다는 것입니다.

이를 통해 다음 구성을 사용하고 모든 클래스를 출력하는 Regex를 사용할 수 있습니다.

// Tailwind Config
module.exports = {
  safelist: [
    {
      pattern: /./, // the "." means "everything"
    },
  ],
  theme: {}
}

저는 M1 Pro 프로세서가 장착된 14인치 Macbook Pro를 사용하고 있으며 로컬에서 테스트했을 때 컴파일하는 데 ~2분이 걸렸고 결과 파일은 거의 7MB였습니다.

한 가지 명심해야 할 점은 이 방법은 변형이 있는 클래스를 생성하지 않는다는 것입니다( lg:text-blue-500 또는 hover:hidden ). 이를 위해서는 variants 개체 내부에서 safelist 속성을 사용해야 합니다.

최종 결과는 다음과 같습니다.

// Tailwind Config
module.exports = {
  safelist: [
    {
      pattern: /./,
      variants: ['md', 'lg', 'xl'], // you can add your variants here
    },
  ],
  theme: {}
}

위의 코드는 컴파일하는 데 무려 18분이 걸렸고 결과 파일은 거의 29MB였으므로 위험을 감수하고 사용하세요 😅.

여기 대안이 있습니다

보시다시피 모든 Tailwind 클래스와 함께 CSS 파일을 사용하는 것은 수행하려는 작업에 따라 실용적이지 않을 수 있습니다.

처음에 언급한 사용 사례(빌드 프로세스를 사용하지 않으려는 경우)의 경우 가능한 대안은 Tailwind CDN 을 사용하는 것입니다. 마크업에 script 태그를 삽입하고 코딩을 시작하면 됩니다! tailwind.config 개체를 통해 설정을 구성할 수도 있고 typography 및 forms 플러그인과 같은 공식 플러그인을 추가할 수도 있습니다.


이게 다야! 이 게시물의 완성된 솔루션에 대해 StevenGFX에 감사를 표하고 싶고 safelist 속성을 사용하여 원하는 모든 Tailwind CSS 클래스를 생성하는 방법을 배웠기를 바랍니다. 빌드 프로세스를 사용하지 않고 바로 코딩을 시작하려는 경우에도 CDN 옵션을 살펴보십시오.