Tailwind CSS – это популярная платформа CSS, ориентированная на утилиты, которая позволяет разработчикам быстро создавать современные и адаптивные пользовательские интерфейсы. Одной из ключевых особенностей Tailwind CSS является встроенная функция очистки, которая удаляет неиспользуемые стили CSS из вашей производственной сборки. Однако могут быть случаи, когда вы захотите внести в белый список определенные классы CSS, чтобы предотвратить их очистку. В этой статье мы рассмотрим несколько методов использования белого списка очистки в Tailwind CSS для оптимизации таблиц стилей.

Метод 1: использование параметра purgeв файле Tailwind.config.js
Самый простой способ внести классы CSS в белый список — указать их непосредственно в параметре purgeфайла ваш файл tailwind.config.js. Откройте файл и найдите свойство purge. По умолчанию он содержит массив путей к файлам HTML, JavaScript и Vue вашего проекта. Чтобы внести определенные классы в белый список, добавьте их в массив contentв параметре purge.

Пример:

module.exports = {
  purge: {
    content: [
      './src//*.html',
      './src//*.js',
      './src//*.vue',
    ],
    options: {
      whitelist: ['font-bold', 'text-red-500'],
    },
  },
  //...
};

Метод 2. Использование параметра safelistв файле Tailwind.config.js
Опция safelistпозволяет указать отдельные классы или шаблоны CSS, которые не следует удалять.. Это полезно, если вы хотите внести в белый список классы, созданные динамически или сторонними библиотеками. Чтобы использовать параметр safelist, добавьте его в файл tailwind.config.jsи укажите классы или шаблоны, которые вы хотите сохранить.

Пример:

module.exports = {
  purge: {
    content: [
      './src//*.html',
      './src//*.js',
      './src//*.vue',
    ],
    options: {
      safelist: ['bg-red-500', /^text-green-.*/],
    },
  },
  //...
};

Метод 3. Использование параметра purgeCSSв инструменте сборки.
Если вы используете такой инструмент сборки, как Webpack или Parcel, вы можете настроить PurgeCSS непосредственно в конвейере сборки. Этот метод позволяет вам настроить поведение очистки в соответствии с вашими конкретными требованиями сборки. Обратитесь к документации вашего инструмента сборки, чтобы узнать, как интегрировать PurgeCSS и указать белый список.

Пример (Webpack):

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src//*.html', './src//*.js', './src//*.vue'],
  whitelist: ['bg-blue-500', /^border-.*$/],
  //...
});
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('tailwindcss'),
                  require('autoprefixer'),
                  ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
                ],
              },
            },
          },
        ],
      },
    ],
  },
  //...
};

Используя функцию очистки белого списка в Tailwind CSS, вы можете оптимизировать производственную сборку и уменьшить общий размер CSS-файлов. Независимо от того, решите ли вы добавить определенные классы в белый список в файле tailwind.config.jsили интегрировать PurgeCSS в свой конвейер сборки, эти методы помогут вам найти правильный баланс между функциональностью и производительностью.