Comparar herramientas

Pon dos herramientas lado a lado: precio, nivel, cuándo conviene cada una y cómo se empieza.

Primera herramienta
Segunda herramienta

Son de la misma categoría: compiten por el mismo hueco en tu proyecto, así que normalmente eliges una.

En una frase

Sass

CSS con variables, anidamiento y archivos reutilizables.

Tailwind CSS

Clases pequeñas en el HTML en vez de archivos CSS.

Precio y nivel

Sass

GratisPrincipiante

Tailwind CSS

GratisPrincipiante
Úsalo si…

Sass

  • Prefieres CSS clásico, pero con variables, anidación y mixins.
  • Mantienes un proyecto con mucho CSS propio.
  • Usas Bootstrap y quieres personalizarlo.

Tailwind CSS

  • Quieres dar estilo sin salir del HTML.
  • Usas React, Vue, Svelte o Astro.
  • Vas a usar librerías como shadcn/ui.
Mejor evítalo si…

Sass

  • Ya usas Tailwind.
  • Te basta con las variables y la anidación del CSS moderno.

Tailwind CSS

  • Te molesta ver muchas clases en el HTML.
  • Tu equipo prefiere CSS clásico por archivos.
Primer paso

Sass

Instala Sass en tu proyecto.

npm install -D sass

Tailwind CSS

Instálalo en un proyecto con Vite.

npm install tailwindcss @tailwindcss/vite
Combina bien con

Sass

Tailwind CSS