Un proyecto en el que he estado trabajando recientemente utiliza Vite, Vue y Tailwind.

Después de un tiempo trabajando con colores personalizados, me encontré con cierta confusión.

Agregar y usar colores personalizados en una plantilla no fue el problema; el proceso se aclara con la documentación de Tailwind

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

Mi problema fue al usar colores personalizados con clases CSS dinámicas y estáticas en la plantilla de Vue.

Al ejecutar el proyecto con npm run dev o vite, bg-custom-green-50 o text-custom-green-50 no funcionaron y nunca aparecieron en los archivos css.

Tengo entendido que si el nombre completo de su clase CSS no existe en la plantilla, Tailwind no lo agregará ni lo generará en el archivo CSS.

Suponiendo que las clases CSS: text-custom-green-50 o bg-custom-green-50 no se utilicen en ningún otro lugar del proyecto

El siguiente ejemplo no funcionará

El siguiente ejemplo funcionará

La diferencia entre los dos ejemplos es que la clase CSS text-custom-green se agrega a la plantilla, por lo que tailwind la agregará al archivo CSS generado.

Para superar esto, puede agregar colores personalizados o clases de viento de cola a una lista segura dentro de su archivo tailwind.config.js.

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

Estos colores estarán disponibles incluso si no se usan directamente en una plantilla, sino que se agregan dinámicamente en otro punto

Esperemos que a alguien más le resulte útil.