Generador de configuración de Tailwind

Compón un archivo tailwind.config.js con tus colores de marca, fuentes y espaciados personalizados, sin escribir el objeto JavaScript a mano. Procesamiento 100% local — nada se envía a un servidor.

Ejemplo:
Un patrón de archivo por línea.
tailwind.config.js

Cómo funciona

En lugar de escribir manualmente el objeto de configuración de Tailwind CSS, introduce tus colores de marca, tus familias de fuentes y tus espaciados adicionales en los formularios de arriba: la herramienta ensambla en directo un archivo tailwind.config.js válido con la sección theme.extend correctamente estructurada, listo para sustituir tu archivo existente.

¿Por qué usar theme.extend en lugar de theme directamente?

Colocar tus añadidos en theme.extend permite conservar todos los valores por defecto de Tailwind (colores, tamaños, espaciados estándar) a la vez que se añaden tus propios valores; redefinir directamente theme reemplazaría por completo los valores por defecto, algo rara vez deseado.

¿Qué significa elegir el modo oscuro "class" o "media"?

Con class, el modo oscuro se activa añadiendo la clase dark a un elemento padre (generalmente <html>), lo que permite alternarlo manualmente mediante JavaScript; con media, Tailwind sigue automáticamente la preferencia del sistema del usuario, sin control manual posible.

El archivo de configuración se genera directamente en tu navegador, sin envío de datos a un servidor.