Um projeto em que venho trabalhando recentemente faz uso de Vite, Vue e Tailwind.

Depois de algum tempo trabalhando com cores personalizadas, enfrentei alguma confusão.

Adicionar e usar cores personalizadas em um modelo não era o problema - o processo fica muito claro usando a documentação do Tailwind

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

Meu problema foi ao usar cores personalizadas com classes CSS dinâmicas e estáticas no modelo Vue.

Ao executar o projeto com npm run dev ou vite o bg-custom-green-50 ou text-custom-green-50 não funcionou e nunca apareceu nos arquivos css.

Meu entendimento é que se o nome completo da sua classe CSS não existir no modelo, o tailwind não o adicionará ou gerará no arquivo css.

Assumindo que as classes css: text-custom-green-50 ou bg-custom-green-50 não são usadas em nenhum outro lugar do projeto

O exemplo abaixo não funcionará

O exemplo abaixo funcionará

A diferença entre os dois exemplos é que a classe css text-custom-green é adicionada ao modelo para que o tailwind a adicione ao arquivo css gerado.

Para superar isso, você pode adicionar qualquer cor personalizada ou classe tailwind a uma lista segura em seu arquivo tailwind.config.js.

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

Essas cores estarão disponíveis mesmo que não sejam usadas diretamente em um modelo, mas adicionadas dinamicamente em outro ponto

Espero que alguém ache isso útil.