Проект, над которым я недавно работал, использует Vite, Vue и Tailwind.

После некоторого времени работы с пользовательскими цветами я столкнулся с некоторым замешательством.

Добавление и использование пользовательских цветов в шаблоне не было проблемой — этот процесс очень понятен в документации Tailwind

// tailwind.config.js
module.exports = {
    theme: {
        colors: {
          'custom-green': {
              50: '#9bd1b2',
              ...
              700: '#284735'
          },
        }
    }
}

Моя проблема заключалась в использовании пользовательских цветов с динамическими и статическими классами CSS в шаблоне Vue.

При запуске проекта с помощью npm run dev или vite bg-custom-green-50 или text-custom-green-50 не работали и никогда не появлялись в файлах CSS.

Насколько я понимаю, если ваше полное имя класса CSS не существует в шаблоне, Tailwind не добавит его и не сгенерирует в файле CSS.

Предполагая, что классы CSS: text-custom-green-50 или bg-custom-green-50 больше нигде в проекте не используются

Пример ниже не будет работать

Пример ниже будет работать

Разница между двумя примерами заключается в том, что к шаблону добавляется CSS-класс text-custom-green, поэтому попутный ветер добавит его в сгенерированный CSS-файл.

Чтобы решить эту проблему, вы можете добавить любые собственные цвета или классы попутного ветра в список безопасных в файле Tailwind.config.js.

// tailwind.config.js
module.exports = {
    safelist: [
        'text-custom-green-50',
        'bg-custom-green-50'
    ]
}

Эти цвета будут доступны, даже если они не используются непосредственно в шаблоне, а добавляются динамически в другом месте

Надеюсь, это кому-нибудь пригодится.