Tailwinds 'safelist'를 사용하여 동적 클래스를 처리하는 방법

Tailwind CSS는 개발자가 빠르고 효율적으로 맞춤형 디자인을 만들 수 있는 인기 있는 유틸리티 우선 CSS 프레임워크입니다. 기본적으로 Tailwind CSS는 다양한 유틸리티 클래스를 생성하므로 파일 크기가 커질 수 있습니다. 이 문제를 해결하기 위해 Tailwind CSS에는 프로덕션 빌드에서 사용되지 않는 스타일을 제거하여 최종 CSS 파일을 더 작고 더 효과적으로 만드는 PurgeCSS라는 기능이 내장되어 있습니다. 그러나 이러한 자동 제거로 인해 애플리케이션에서 특정 스타일이 동적으로 또는 조건부로 사용될 때 문제가 발생할 수 있습니다. 이 문서에서는 Tailwind CSS의 허용 목록 기능에 대해 자세히 알아보고, 특정 스타일을 허용 목록에 추가하는 방법을 알아보고, 허용 목록 사용이 도움이 될 수 있는 다양한 시나리오를 살펴보겠습니다.

1. Tailwind CSS의 PurgeCSS 이해

PurgeCSS는 프로젝트 파일에서 사용된 클래스 이름을 검색하고 최종 CSS 파일에서 사용되지 않는 클래스 이름을 제거하는 강력한 도구입니다. 이렇게 하면 생성된 CSS의 크기가 크게 줄어들어 애플리케이션이 더 빠르게 로드됩니다.

기본적으로 Tailwind CSS에는 HTML, JavaScript 및 Vue 파일에서 클래스 이름을 검색하는 PurgeCSS 구성이 포함되어 있습니다. 구성 파일의 콘텐츠 배열 내에서 어떤 파일이 선택되는지 쉽게 조정할 수 있습니다.

어떤 상황에서는 특정 스타일이 파일에서 감지되지 않더라도 제거되지 않도록 해야 할 수도 있습니다. 여기에서 허용 목록 기능이 작동됩니다.

2. Safelist 소개

Safelist는 특정 스타일을 허용 목록에 추가하여 삭제 프로세스 중에 해당 스타일이 제거되지 않도록 하는 Tailwind CSS의 기능입니다. 이는 JavaScript를 통해 생성되거나 사용자 상호 작용을 기반으로 적용되는 동적 클래스 이름이 있는 경우 특히 유용합니다. 허용 목록의 또 다른 매우 일반적인 사용 사례는 색상이나 스타일이 CMS 또는 백엔드 프레임워크에서 구동되는 경우입니다. 그러한 예 중 하나는 웹 사이트 관리자가 CMS에서 카테고리의 색상을 편집할 수 있도록 허용하는 시스템일 수 있으며, 그러면 해당 카테고리에 대한 탐색 항목의 색상이 변경됩니다. 파일에 색상을 출력하는 서버측 코드가 포함되어 있으므로 Tailwind에서는 실제 클래스 이름을 볼 수 없습니다.

이러한 클래스 이름을 허용 목록에 추가하면 PurgeCSS가 프로젝트 파일에서 해당 클래스를 찾을 수 있는지 여부에 관계없이 최종 CSS 파일에 항상 포함됩니다.

3. tailwind.config.js에서 허용 목록 구성

Tailwind CSS 프로젝트에서 허용 목록을 구성하려면 tailwind.config.js 파일을 수정해야 합니다. 허용 목록은 프로젝트 파일에 없더라도 최종 CSS 파일에 보관하려는 클래스 이름의 배열입니다. 다음은 허용 목록에 클래스 이름을 추가하는 방법에 대한 예입니다.

// tailwind.config.js
module.exports = {
  content: [
    // your content files here
  ],
  safelist: [
    'bg-red-500', 
    'text-white', 
    'hover:bg-red-700'
  ],  
  // other configurations
};

이 예에서는 bg-red-500, text-white 및 hover:bg-red-700 클래스가 허용 목록에 추가되었습니다. 이러한 클래스는 PurgeCSS가 프로젝트 파일에서 찾지 못하더라도 최종 CSS 파일에 항상 포함됩니다.

4. 더욱 고급화된 구성

안전 목록 내에서 관리해야 할 클래스가 많은 경우, 아마도 여러 색상과 :hover, :focus, :active 및 dark:와 같은 변형/수정자를 지원해야 하기 때문에 관리하기가 매우 어려워질 수 있습니다. 이것들은 허용 목록 내에 있습니다. 목록은 매우 빨리 커질 것입니다.

여기서 패턴이 등장합니다. Tailwind는 허용 목록 내에서 정규식을 지원합니다.

safelist: [
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

이 2개의 항목으로 우리는 효과적으로 12개의 클래스를 추가하고 있습니다. from-{color}-200 및 to-{color}-100, 여기서 {color}는 목록의 모든 색상입니다. 목록을 관리하는 것이 훨씬 쉬워졌습니다. tailwind.config.js는 단지 JavaScript 파일이므로 많이 반복되는 색상 목록을 관리하는 경우 파일 상단에서 변수를 관리할 수 있습니다.

정규식에 명시적으로 나열하지 않고도 목록 내의 모든 항목에 대한 변형을 정의할 수도 있습니다.

safelist: [
  {
    pattern: /text-(blue|green|indigo|pink|orange|rose)-(600|400)/,
    variants: ['hover'],
  },
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

5. 허용 목록 예 및 사용 사례

허용 목록 기능을 사용하면 도움이 될 수 있는 몇 가지 시나리오가 있습니다.

동적 클래스 이름: 일부 데이터나 사용자 입력을 기반으로 클래스 이름을 동적으로 생성하는 경우 PurgeCSS는 이러한 클래스를 감지하지 못하고 최종 CSS 파일에서 제거할 수 있습니다. 이러한 동적 클래스를 허용 목록에 추가하면 해당 클래스를 애플리케이션에서 항상 사용할 수 있습니다.

// Example of a dynamic class name based on user input
const userInput = 'success'; // This value might come from an API or user input
const alertClass = `alert-${userInput}`;

// Generated class name: 'alert-success'

이 예에서 AlertClass 변수는 사용자 입력 또는 API의 데이터를 기반으로 클래스 이름을 생성합니다. PurgeCSS는 이 동적 클래스 이름을 감지할 수 없으므로 tailwind.config.js 파일의 허용 목록에 추가해야 합니다.

Conditional styles: If you have styles that only apply under specific conditions, such as a dark mode or a mobile view, you can use the safelist to ensure those styles are always included in your final CSS file.

// Example of a conditional style based on a media query
@media (max-width: 767px) {
  .hidden-mobile {
    display: none;
  }
}

In this example, the hidden-mobile class is only applied when the viewport width is less than 768 pixels. Since this class might not be detected by PurgeCSS, you should add it to the safelist in your tailwind.config.js file.

6. Best Practices for Safelisting

When using the safelist feature in Tailwind CSS, keep the following best practices in mind:

• Only add classes to the safelist that are truly necessary. Adding too many classes can bloat your final CSS file and negate the benefits of PurgeCSS.
• If you have many dynamic class names or a complex application, consider using a function or regular expression to generate the safelist array. This can help keep your configuration cleaner and more maintainable.
• Test your production build to ensure that all required styles are included. This can help you catch any issues early on and avoid surprises when deploying your application.

Summary

The safelist feature in Tailwind CSS provides a powerful way to whitelist specific styles and ensure they are included in your final CSS file, even if they are not detected by PurgeCSS. By understanding how to configure the safelist and use it effectively in various scenarios, you can make your Tailwind CSS projects more robust and maintainable. Remember to follow best practices when using the safelist to ensure your final CSS file remains lean and performant.

Feel free to look over the Tailwind Docs on Safelist usage.

위 내용은 Tailwinds 'safelist'를 사용하여 동적 클래스를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!