Personaliza Tailwind con colores y fuentes de Figma

Personalizar Tailwind CSS a partir de un design system te permite traducir colores, tipografías e imágenes de tu maquetado en Figma a clases reutilizables dentro del proyecto. Esta guía es para quienes ya conocen lo básico de Tailwind y quieren darle identidad visual propia a su código sin escribir estilos repetitivos.

Un design system es el archivo donde defines estilos, tamaños, tipografías y colores que vas a usar en todo el proyecto. En lugar de improvisar cada valor, lo centralizas y lo llamas por nombre. Y aquí viene lo interesante: todo empieza automatizando el proceso de compilación para no repetir comandos largos.

Cómo automatizar el build de Tailwind con npm

Antes de tocar los estilos conviene crear un atajo. Cada vez que editas el archivo de configuración necesitas recompilar, y escribir el comando completo una y otra vez cansa.

Dentro de tu package.json, en la sección de scripts, agregas un comando bajo el nombre tailwind build [00:38]. El comando indica el archivo de entrada y el de salida:

"scripts": { "tailwind build": "tailwind -i ./src/css/tailwind.css -o ./public/css/tailwind.css" }

Con esto, solo escribes npm run tailwind build y listo. La bandera -i marca el archivo de entrada (input) y -o el de salida (output).

¿Por qué hay que hacer build cada vez que edito Tailwind? Porque el archivo de configuración no se aplica en tiempo real. Cada cambio en colores, fuentes o clases requiere recompilar para que se genere el CSS final que lee tu HTML.

Qué partes tiene el archivo de configuración de Tailwind

El archivo tailwind.config se compone de varias secciones principales que verás apenas lo abras [01:32].

• purge: limpia o purga las clases que no necesitas para aligerar el archivo final.
• darkMode: define cómo integras el modo oscuro al proyecto.
• theme, variants y plugins: aquí es donde trabajarás la personalización.

Todo el trabajo de esta clase ocurre dentro de theme, específicamente en extend, que es donde agregas tus clases extra sin sobrescribir las nativas de Tailwind.

Cómo agregar imágenes de fondo personalizadas

Primero organiza tus recursos. Crea una carpeta image dentro de public y arrastra ahí todas tus imágenes ya nombradas según su uso [02:26].

Luego, dentro de extend, agregas una propiedad backgroundImage donde defines cada imagen con su nombre y su ruta usando url():

js extend: { backgroundImage: { 'sanfrancisco': "url('../image/sanfrancisco.jpg')" } }

Así repites el proceso con cada imagen, respetando los nombres correspondientes.

Cómo definir una paleta de colores desde Figma

Aquí conectas tu diseño con el código. Los colores primario, secundario y terciario ya están definidos en tu Figma, y solo necesitas copiar sus valores hexadecimales [03:24].

Agregas un backgroundColor que use la función theme para traer los colores nativos de Tailwind y sumar los tuyos:

js backgroundColor: theme => ({ ...theme('colors'), primary: '#HEX', secondary: '#HEX', tertiary: '#HEX' })

El color secundario es un verde y el terciario un azul, ambos copiados directo del Figma. El spread de theme('colors') conserva la paleta original mientras añade la tuya.

Por qué necesitas definir textColor por separado

Si quieres aplicar esos mismos colores al texto, no basta con el backgroundColor. Tienes que repetir la definición en una propiedad textColor con los mismos valores [05:04].

Esto explica una regla clave: siempre llamas tus colores con un prefijo. Usas bg-primary para fondos y text-primary para texto. Si no defines textColor, la clase de texto simplemente no existirá.

¿Cómo aplico un color personalizado al texto en Tailwind? Debes declararlo dentro de textColor en el config, aparte de backgroundColor. Recién entonces podrás usar clases como text-secondary en tu HTML.

Después de cada cambio ejecutas npm run tailwind build para que se apliquen. Cuando el autocompletado sugiere bg-primary, es buena señal: significa que la clase ya vive dentro de tu configuración.

Cómo integrar la tipografía Montserrat en Tailwind

La tipografía elegida es Montserrat, y se integra desde Google Fonts. Buscas la fuente, seleccionas la variante Regular 400 y copias el link que te da Google en tu archivo HTML [06:33].

Luego la declaras en el config dentro de fontFamily, pero con una diferencia importante: aquí el valor es un arreglo que incluye la fuente y una alternativa genérica.

js fontFamily: { montserrat: ['Montserrat', 'sans-serif'] }

El fallback sans-serif asegura que, si la fuente no carga, el navegador use una similar. Tras el build, aplicas la clase font-montserrat a tu etiqueta p y verás la tipografía funcionando [07:52].

Qué hacer si IntelliSense estorba al configurar

Mientras editas el config, la extensión de IntelliSense puede lanzar alertas molestas. Puedes deshabilitarla temporalmente y reactivarla cuando quieras, sin que eso afecte tu proyecto [06:52]. Es solo comodidad al escribir.

Un detalle recurrente durante las pruebas: la extensión de Live Server se desconectaba al recargar, así que basta con volver a iniciarla con "Go Live" para ver los cambios reflejados.

Con el config listo, tu proyecto ya tiene identidad visual propia: colores, imágenes y tipografía centralizados. Ahora te toca crear tu propia paleta y sumar las fuentes que quieras. ¿Qué colores elegiste para tu proyecto? Cuéntalo en los comentarios.