Què és Tailwind CSS? Guia en llenguatge senzill per a creadors d'apps

Tailwind CSS és un conjunt d'eines per donar estil a llocs web. En lloc d'escriure regles d'estil separades en un fitxer propi, dones a cada element noms de classe curts i ja fets —bg-white per a un fons blanc, p-4 per al marge interior, text-lg per a un text més gran, rounded-xl per a cantonades arrodonides— i Tailwind genera el CSS que necessita el navegador. És gratuït, de codi obert i una de les maneres més habituals d'estilar les aplicacions web modernes.

Per què Tailwind importa quan construeixes amb IA

Si construeixes una aplicació web amb un constructor d'apps d'IA, és probable que la teva app estigui estilada amb Tailwind. Mythex, per exemple, comença els projectes nous amb Vite + React + TypeScript + Tailwind tret que demanis una altra cosa (com es tria la tecnologia).

Això et importa en tres aspectes:

• Els canvis de disseny són barats. Com que l'estil viu just al costat de cada botó, targeta i títol, la IA pot fer el canvi «fes les targetes menys carregades» editant algunes classes en un sol lloc.
• Pots llegir-ho. Les classes de Tailwind són gairebé llenguatge natural. text-center font-bold text-2xl no és difícil d'entendre, encara que mai no hagis escrit codi.
• L'aspecte es manté coherent. Tailwind inclou una escala fixa de mides, espaiats i colors. Així una app no acaba amb 14 grisos lleugerament diferents.

Una analogia quotidiana

Pensa en la pintura i en la construcció d'una casa.

El CSS normal és com barrejar la teva pròpia pintura per a cada paret. Tens llibertat total, però al cap d'un temps el menjador és «blanc càlid», el passadís és «blanc una mica més càlid» i ningú no recorda per què.

Tailwind és com una carta de colors d'una botiga de pintura més un conjunt d'adhesius amb etiqueta. Cada paret porta un adhesiu —«blanc, mat, 2 capes»— i la carta només ofereix un conjunt seleccionat de tonalitats. Perds una mica de llibertat, però tothom a l'obra sap exactament com ha de ser cada paret només llegint l'adhesiu.

Com funciona Tailwind

Una pàgina web es construeix amb HTML (el contingut i l'estructura) i CSS (l'aspecte). Normalment, el CSS viu en un fitxer separat amb regles com aquesta:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Amb Tailwind, t'estalvies escriure aquesta regla i poses classes d'utilitat directament a l'element:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

Cada classe fa una petita feina. Quan l'app es compila, Tailwind analitza els teus fitxers, troba les classes que has fet servir realment i genera només el CSS d'aquestes. Així el full d'estils final és petit.

Tailwind versió 4, la versió major actual, es configura amb molt poca configuració: l'instal·les, afegeixes el seu complement a l'eina de compilació i poses @import "tailwindcss"; a la part superior del teu fitxer CSS. Les personalitzacions, com els colors de marca i les tipografies, es defineixen en CSS com a tokens de disseny i no en un fitxer de configuració JavaScript gran, com feien les versions anteriors. Si llegeixes un tutorial antic que menciona tailwind.config.js, per això és.

Un exemple pràctic: una targeta de preus

Imagina que has demanat al teu constructor d'IA una pàgina de preus i vols que la targeta «Pro» destaqui. El codi de la targeta podria ser així (en un component de React, class s'escriu className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

Llegint-ho d'esquerra a dreta:

Si demanes «fes que la targeta Pro destaqui amb una vora blava i una ombra subtil», la IA pot canviar border-gray-200 a border-2 border-blue-600 i afegir shadow-lg. Aquest és tot el canvi.

Disseny adaptable i mode fosc

Tailwind té prefixos curts per a mides de pantalla i estats:

• md:grid-cols-3 — tres columnes en pantalles mitjanes i més grans; en un telèfon s'aplica la columna única per defecte. Tailwind és primer mòbil: les classes sense prefix s'apliquen a tot arreu, i els prefixos afegeixen canvis per a pantalles més grans.
• hover:bg-gray-700 — un botó més fosc quan el ratolí és a sobre.
• dark:bg-gray-900 — un fons diferent quan el mode fosc està activat.

Per això, demanar un disseny adaptable a mòbils o un mode fosc sol ser ràpid en un projecte amb Tailwind.

Termes clau

Idees errònies habituals

• «Tailwind és un disseny.» No ho és. Tailwind et dona blocs de construcció, no un aspecte. Dos llocs amb Tailwind poden semblar completament diferents. L'«aspecte genèric d'app d'IA» prové dels valors per defecte, no de Tailwind en si; dona a la teva eina de construcció una direcció real. Consulta com dissenyar una app ben acabada amb IA.
• «És el mateix que els estils en línia.» No exactament. Les classes provenen d'una escala compartida, admeten hover, mode fosc i punts de ruptura, i es converteixen en CSS normal durant la compilació.
• «Tailwind fa les pàgines pesades.» La compilació només inclou les classes que fas servir, així que el CSS que rep el visitant sol ser petit.
• «Les llistes de classes llargues vol dir codi desordenat.» Al principi semblen carregades, però tot l'aspecte d'un element està en un sol lloc. Els patrons repetits normalment s'agrupen en components, com un únic Button.
• «Si uso Tailwind no puc fer servir CSS personalitzat.» Encara pots escriure CSS normal quan ho necessitis.

Què demanar al teu constructor d'IA

• «Defineix els colors i les tipografies de la nostra marca una sola vegada com a tokens de tema, i fes-los servir a tot arreu en lloc de colors escrits a mà.»
• «Fes que cada targeta, botó i camp d'entrada tinguin el mateix arrodoniment de cantonades i el mateix espaiat.»
• «Revisa el disseny a l'amplada d'un telèfon i corregeix tot el que es desbordi o sigui massa petit per tocar.»
• «Afegeix el mode fosc fent servir la variant dark: de Tailwind i assegura't que el contrast del text continuï sent llegible.»
• «Agrupa els estils repetits dels botons en un únic component Button reutilitzable.»
• «Explica en llenguatge senzill les classes de Tailwind d'aquesta secció.»

Tailwind a Mythex

Els projectes nous de Mythex fan servir Tailwind per defecte juntament amb React i TypeScript, de manera que pots demanar canvis visuals amb paraules senzilles i veure'ls a la Vista prèvia en directe. Si prefereixes veure el codi, l'editor de codi mostra totes les classes (només lectura al pla Free, editable al Pro). Si prefereixes CSS normal o una configuració diferent, digues-ho al teu primer prompt —els documents expliquen com es tria la pila tecnològica.

Preguntes