Tailwind vs tokens CSS: lo que nadie te cuenta sobre los «frameworks» para WordPress

El ecosistema WordPress ha sido testigo en los últimos años del auge de varios «frameworks CSS» que, en realidad, poco tienen de framework. En este artículo vamos a desmontar mitos, analizar casos reales y mostrar por qué Tailwind CSS sigue siendo la opción más potente, flexible y con mayor respaldo a nivel global. Todo ello con un enfoque pedagógico y práctico, centrado en los desafíos reales de diseñadores y desarrolladores que trabajan con WordPress.

¿Qué es realmente un framework CSS?

Un framework CSS auténtico debería proporcionar:

• Un conjunto completo de herramientas para diseñar sitios web sin escribir CSS personalizado.
• Convenciones claras que favorezcan la escalabilidad, es decir, la capacidad de que el diseño crezca y se mantenga ordenado y sostenible a medida que el proyecto se hace más complejo.
• Consistencia visual a través de utilidades o componentes.
• Capacidad de adaptación al flujo de trabajo de cualquier profesional del frontend, ya sea diseñador o desarrollador.

En cambio, muchos de los frameworks que se están popularizando en el ecosistema WordPress son simplemente sistemas de tokens CSS (variables) y una metodología BEM predefinida.

BEM (Block Element Modifier) es una metodología que ayuda a escribir clases CSS de forma estructurada, indicando claramente qué parte del diseño representa cada clase. Aunque útil, su implementación manual requiere disciplina y conocimientos sólidos de CSS para ser realmente efectiva.

¿Eso es un framework? No necesariamente.

Tailwind CSS: el estándar real

Tailwind es el único framework utility-first que cumple con los cuatro puntos anteriores:

• No necesitas escribir CSS personalizado: el sistema utility-first permite construir cualquier diseño directamente desde el HTML.
• Es completamente configurable: puedes adaptar el sistema a tu naming, escalas, colores o variantes. Puedes replicar cualquier diseño, sistema de tokens o incluso seguir tu propia lógica de clases.
• Cuenta con la comunidad más amplia y madura, con decenas de plugins, extensiones, documentación y ejemplos para todos los niveles.
• Compatible con cualquier entorno: WordPress, Laravel, React, Astro, Eleventy… Tailwind se integra donde lo necesites.

Además, Tailwind no solo es una herramienta de desarrollo, sino una forma de pensar el diseño visual basada en principios reutilizables, claros y estructurados. Esta coherencia hace que incluso equipos grandes puedan trabajar con eficiencia y consistencia.

Ejemplo de código con Tailwind

<section class="bg-primary text-white py-12 px-8">
  <h1 class="text-4xl font-bold mb-4">¿Por qué elegir Tailwind?</h1>
  <p class="text-lg leading-relaxed">Porque puedes hacer todo esto sin abrir un archivo CSS.</p>
</section>

Con este enfoque, no hay necesidad de crear clases personalizadas ni preocuparse por colisiones. Todo está contenido y ordenado desde el principio.

ACSS: popular, útil… pero ¿es realmente un framework?

Automatic.css (ACSS) ha ganado popularidad especialmente entre usuarios de Bricks y Oxygen por su buena integración visual y su filosofía estructurada. Tiene una comunidad activa y recursos educativos abundantes. Sin embargo, hay aspectos clave que lo diferencian de Tailwind:

• Es un framework utility-first: sus clases son atómicas y permiten construir desde el HTML, como en Tailwind.
• Su nomenclatura es más semántica que descriptiva, lo que puede dificultar la trazabilidad visual si no estás familiarizado con su sistema.
• Aunque se presenta como framework, su creador promueve el uso de CSS puro con variables (tokens) y metodología BEM como parte del flujo de trabajo recomendado.
• No utiliza modificadores inline como md: o hover:. En su lugar, hay que aprender clases distintas para cada variante, lo que genera un número mucho mayor de clases de utilidad y reduce la flexibilidad.
• Esto genera una dualidad: por un lado, ofrece clases útiles; por otro, te anima a escribir CSS personalizado, con un enfoque tradicional.

Ejemplo con utilidades de ACSS:

<section class="bg--primary text--white section--xl">
  <h1 class="text--xl text--700 margin--bottom-m">¿Por qué elegir ACSS?</h1>
  <p class="text--m">Porque simplifica tareas visuales sin complicaciones.</p>
</section>

Ejemplo con CSS puro + tokens + BEM (en el contexto de ACSS):

:root {
  --color-primary: #ff0055;
  --font-size-xl: 2rem;
  --padding-section: 3rem;
}

.hero__title {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  margin-bottom: 1.5rem;
}

<section class="hero">
  <h1 class="hero__title">¿Por qué elegir ACSS?</h1>
  <p class="hero__text">Porque promueve orden visual, aunque requiere más CSS manual.</p>
</section>

Este enfoque, aunque válido, exige conocimientos más profundos de CSS y metodologías como BEM. Además, rompe con la promesa de no tener que escribir CSS si usas un framework.

Por eso muchos usuarios terminan dependiendo del CSS tradicional, incluso usando ACSS, lo cual plantea la pregunta clave: ¿para qué quieres un framework si necesitas volver a escribir tu propio CSS?

Core Framework: visual, simple y con límites claros

Core Framework apuesta por una interfaz visual muy cuidada y una experiencia simplificada desde el panel de control de WordPress. Sus puntos fuertes son:

• Generación automática de tokens CSS personalizados desde el panel.
• Creación visual de clases utilitarias, sin necesidad de editar CSS directamente.
• Repertorio de clases más limitado que otros frameworks como Tailwind.
• Pensado para proyectos pequeños o medianos, donde la escalabilidad extrema no es prioritaria.

Ejemplo Core Framework:

<section class="bg-primary text-light padding-vertical-xl">
  <h1 class="text-3xl font-700 margin-bottom-m">¿Por qué elegir Core Framework?</h1>
  <p class="text-m">Porque combina tokens visuales y utilidades básicas con una buena interfaz visual.</p>
</section>

Es una solución excelente para quienes priorizan simplicidad, personalización básica y una curva de aprendizaje rápida dentro del entorno WordPress.

¿Y los «frameworks» que solo ofrecen tokens?

En los últimos años han surgido herramientas en el ecosistema WordPress que se presentan como frameworks CSS, pero que en realidad no generan clases ni permiten diseñar visualmente desde el HTML. Se centran únicamente en ofrecer un sistema de tokens —es decir, variables CSS predefinidas para espaciado, color, tipografía y tamaño—.

El ejemplo más representativo es el sistema de diseño incluido en plugins como Advanced Themer u otros paneles visuales para Bricks. Estos permiten:

• Definir y modificar valores desde un panel (ej. --space-xl, --color-primary).
• Aplicar esos valores en hojas de estilo personalizadas o directamente en constructores visuales.
• Mantener cierta consistencia visual en todo el sitio.

Pero aquí está el problema:

• No puedes construir un diseño completo sin escribir CSS.
• No hay utilidades predefinidas que puedas usar directamente en el HTML.

Es decir, dependes de escribir manualmente reglas CSS, o de usar editores visuales que apliquen esas variables por ti. En ese caso, ¿realmente necesitas un «framework»?

Aquí es donde debemos hacer una pausa. Frameworks como el de Advanced Themer no son verdaderos frameworks CSS. Lo que ofrecen es:

• Un sistema de variables CSS (tokens) para espaciado, color y tipografía.
• Un panel visual para modificar esas variables.
• A veces, una estructura de nombres que imita la metodología BEM.

Eso no es un sistema para construir interfaces sin CSS. Es, como mucho, una capa superficial de diseño que no ahorra tiempo ni garantiza consistencia. Requiere que escribas CSS, aprendas la lógica del framework y configures manualmente tus clases.

¿Qué sentido tiene usar un framework si necesitas escribir CSS?

Aquí es donde Tailwind marca la diferencia:

• No tienes que salir del HTML para crear layouts o modificar estilos.
• Puedes automatizar todo tu sistema visual sin necesidad de archivos externos.
• Tiene herramientas para adaptar su uso incluso al paradigma de tokens o diseño por capas si lo deseas.

Tokens + BEM: una metodología, no un framework

Muchos de estos «frameworks» han sido influenciados por ACSS y terminan convirtiéndose en lo siguiente:

• Un sistema de diseño personalizado con tokens y clases BEM.
• Una carga cognitiva alta para principiantes.
• Una dependencia total de escribir CSS.

Esto puede estar bien para diseñadores front-end expertos. Pero si estás trabajando con WordPress, quieres construir rápido, iterar visualmente y mantener consistencia, Tailwind es la solución más completa.

Comparativa final

Reflexión final: ¿para qué quieres un framework?

Si lo único que buscas es una colección de variables y te sientes cómodo escribiendo CSS, probablemente no necesites un framework. Pero si lo que quieres es:

• Un sistema que te permita construir sin fricción.
• Adaptarte a cualquier proyecto y cliente.
• Ahorrar tiempo en cada fase.
• Integrarte con WordPress sin perder flexibilidad.

… entonces Tailwind CSS es tu mejor aliado.

Si te interesa aprender a usar Tailwind en WordPress (Bricks, Gutenberg, o cualquier stack), tienes acceso al curso Descubre Tailwind con un enfoque totalmente práctico y centrado en tu día a día como diseñador o desarrollador. Además, accedes a la comunidad privada de Flowtitude.

👉 Apúntate aquí al curso Descubre Tailwind

Y si quieres debatir sobre estos enfoques, compártenos tu experiencia en el grupo de Facebook o los directos semanales.