¿CSS puro o Tailwind CSS?

Tailwind se ha puesto muy de moda estos últimos años, a veces por lo práctico que es y a veces porque a mucha gente le resulta más fácil que aprender CSS a fondo.

Yo empecé a usarlo hace apenas un año, en proyectos con Astro, y me costó muy poco acostumbrarme. Seguramente porque llevaba años diseñando con CSS nativo: ya sabía qué quería conseguir y solo tenía que aprender cómo se escribía en clases. Eso no le pasa a todo el mundo, y creo que cambia bastante la respuesta a la pregunta del título.

Hoy uso los dos, y te cuento cuándo elijo cada uno.

Dónde gana Tailwind

Para maquetar, Tailwind me hace ir mucho más rápido. Compongo la interfaz directamente en el HTML, sin saltar a otro archivo ni pensar cómo llamar a cada clase, y todo sale de la misma escala de espacios, colores y tipografía, así que el diseño queda consistente sin esfuerzo.

Con Astro además encaja muy bien: como los componentes se reutilizan con facilidad, las clases largas quedan encapsuladas en un solo sitio y no se repiten por todo el proyecto.

Si tengo que sacar algo rápido, ordenado y que vaya a crecer, Tailwind es mi primera opción.

Dónde prefiero CSS: sombras y pseudoelementos

Aquí es donde Tailwind no me termina de convencer, y es de lo poco que no me gusta de él.

Las sombras, sobre todo. Cuando quiero una sombra con cuerpo suelo necesitar varias apiladas, y en Tailwind eso acaba en una clase arbitraria que cuesta leer:

<div class="shadow-[0_1px_2px_rgb(0_0_0/0.06),0_4px_8px_rgb(0_0_0/0.06),0_16px_32px_rgb(13_188_130/0.12)]">

En CSS lo mismo se lee de un vistazo, y si la uso en varios sitios la cambio en uno solo:

.tarjeta {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 4px 8px rgb(0 0 0 / 0.06),
    0 16px 32px rgb(13 188 130 / 0.12);
}

Sé que en Tailwind 4 se puede definir una sombra propia en @theme y usarla como shadow-lo-que-sea, y todavía no he profundizado en eso. Pero incluso así acabo escribiendo la sombra en CSS, solo que en otro sitio.

Con los pseudoelementos (::before y ::after) me pasa lo mismo. Este es un trozo real del ::before de las tarjetas de proyecto de mi portafolio, escrito en Tailwind:

before:absolute before:size-36 before:aspect-square before:rounded-full
before:blur-3xl dark:before:blur-3xl dark:before:opacity-20 before:opacity-5
before:transition before:-z-1 before:left-7/12 before:bottom-50 xl:before:-bottom-0
before:[background-image:radial-gradient(circle,_rgba(71,255,194)_0,_rgba(0,255,191)_100%)]
dark:before:[background-image:radial-gradient(circle,_rgba(7,255,173)_0,_rgba(1,45,34)_100%)]

Funciona, pero cada propiedad lleva el prefijo before: y el modo oscuro duplica la mitad. En CSS sería esto:

.proyecto::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 58.33%;
  bottom: 12.5rem;
  width: 9rem;
  aspect-ratio: 1;
  border-radius: 9999px;
  filter: blur(64px);
  opacity: 0.05;
  background-image: radial-gradient(circle, rgb(71 255 194) 0, rgb(0 255 191) 100%);
  transition: opacity 150ms;
}

.dark .proyecto::before {
  opacity: 0.2;
  background-image: radial-gradient(circle, rgb(7 255 173) 0, rgb(1 45 34) 100%);
}

@media (min-width: 80rem) {
  .proyecto::before { bottom: 0; }
}

Es más largo, pero se entiende mejor y es más fácil de mantener. Cuando un estilo depende de muchas sombras o de un pseudoelemento, me resulta más sostenible hacerlo en CSS.

Lo que cuesta cada uno

CSS puro te da control total y no depende de ninguna herramienta, pero exige disciplina: sin una buena organización, entre la cascada, la especificidad y los nombres de clase, el proyecto se desordena rápido.

Tailwind te quita casi todos esos problemas a cambio de un HTML muy cargado y de un paso de compilación. Y si no conoces CSS, te quita también la posibilidad de entender qué está pasando cuando algo no sale como esperabas.

Mi respuesta

Nunca me he arrepentido de elegir uno u otro en un proyecto. Creo que es justamente porque usé mucho CSS antes de llegar a Tailwind: hoy puedo decidir con bastante seguridad qué conviene en cada proyecto nuevo, y a menudo acabo usando los dos a la vez.

Así que mi consejo es aprender CSS a fondo primero. Con esa base, Tailwind se aprende en poco tiempo, y también cualquier otro framework, por distinto que sea: Bootstrap, Bulma o el que venga.