tailwind-fluid-size

v1.0.0

Published

2 months ago

Sistema de tipografía fluida 100% personalizable con CSS Variables para Tailwind CSS 4

Downloads

0High
0Medium
0Low

tailwindcss tailwind typography fluid responsive clamp css-variables font-size fluid-typography responsive-typography css design-system

Tailwind Fluid Size

Plugin CSS 100% personalizable con variables CSS para Tailwind CSS 4 que genera utilidades de tamaño de fuente responsive con escalado fluido automático.

🚀 Características

✅ 36 utilidades de tamaño: text-size-4 hasta text-size-144 (incrementos de 4px)
✅ 100% Personalizable: Usa CSS variables - cambia TODO sin editar el plugin
✅ Escalado fluido: Tipografía que se adapta suavemente al viewport con clamp()
✅ Line-height inteligente: Automático según el tamaño (tight, snug, normal, relaxed)
✅ Sin JavaScript: 100% CSS puro, usa @utility de Tailwind CSS 4
✅ Respeta mínimos: Configurable tamaño mínimo absoluto (default: 12px)

📦 Instalación

npm install tailwind-fluid-size

🎯 Uso Básico

En tu archivo CSS principal:

/* app.css o styles.css */
@import "tailwindcss";
@import "tailwind-fluid-size";

En tu HTML:

<h1 class="text-size-72 font-bold">Título Principal</h1>
<p class="text-size-20">Párrafo descriptivo</p>
<span class="text-size-12">Texto pequeño</span>

¡Eso es todo! El plugin escala automáticamente los tamaños de forma fluida.

⚙️ Personalización con CSS Variables

La magia está en que TODO es personalizable con CSS variables. Cambia las variables y todas las clases se ajustan automáticamente.

Variables Disponibles

:root {
  /* Viewports para el escalado */
  --fluid-min-vw: 320;      /* Viewport mínimo (mobile) - default: 320px */
  --fluid-max-vw: 1280;     /* Viewport máximo (desktop) - default: 1280px */
  
  /* Escala mobile (cuánto se reduce en móvil) */
  --fluid-scale-mobile: 0.7;  /* 70% del tamaño en mobile - default: 0.7 */
  
  /* Tamaño mínimo absoluto */
  --fluid-min-size: 12;     /* Ningún texto menor a esto - default: 12px */
  
  /* Line heights automáticos */
  --fluid-lh-tight: 1.1;    /* Para títulos gigantes (≥76px) */
  --fluid-lh-snug: 1.2;     /* Para títulos (44-72px) */
  --fluid-lh-normal: 1.25;  /* Para texto normal (≤40px) */
  --fluid-lh-relaxed: 1.5;  /* Para lectura (16-24px) */
}

Ejemplo: Escalado más agresivo en móvil

@layer base {
  :root {
    --fluid-scale-mobile: 0.6;  /* 60% en vez de 70% */
  }
}

@import "tailwindcss";
@import "tailwind-fluid-size";

Ahora text-size-64 irá de 38px (mobile) a 64px (desktop) en vez de 45px a 64px.

Ejemplo: Viewport más amplio

@layer base {
  :root {
    --fluid-min-vw: 375;   /* iPhone moderno */
    --fluid-max-vw: 1920;  /* Pantallas grandes */
  }
}

@import "tailwindcss";
@import "tailwind-fluid-size";

Ejemplo: Tamaño mínimo diferente

@layer base {
  :root {
    --fluid-min-size: 14;  /* Ningún texto menor a 14px */
  }
}

@import "tailwindcss";
@import "tailwind-fluid-size";

Ejemplo: Line heights personalizados

@layer base {
  :root {
    --fluid-lh-relaxed: 1.6;  /* Más espacio para lectura */
    --fluid-lh-tight: 1.0;    /* Títulos más compactos */
  }
}

@import "tailwindcss";
@import "tailwind-fluid-size";

📐 Cómo Funciona el Escalado

El plugin usa clamp() con CSS variables para crear tipografía fluida:

/* Ejemplo: text-size-64 */
font-size: clamp(
  45px,   /* Mínimo: 64px * 0.7 (--fluid-scale-mobile) */
  calc(45px + 19px * ((100vw - 320px) / 960)),  /* Fluido */
  64px    /* Máximo */
);

Resultado:

Viewport 320px (mobile): 45px
Viewport 800px (tablet): 54px
Viewport 1280px+ (desktop): 64px

Y entre medio, escala suavemente sin saltos.

🎨 Todas las Clases Disponibles

text-size-4    text-size-8    text-size-12   text-size-16
text-size-20   text-size-24   text-size-28   text-size-32
text-size-36   text-size-40   text-size-44   text-size-48
text-size-52   text-size-56   text-size-60   text-size-64
text-size-68   text-size-72   text-size-76   text-size-80
text-size-84   text-size-88   text-size-92   text-size-96
text-size-100  text-size-104  text-size-108  text-size-112
text-size-116  text-size-120  text-size-124  text-size-128
text-size-132  text-size-136  text-size-140  text-size-144

Comportamiento por Tamaño

| Clase | Tamaño Base | Mínimo (mobile) | Line Height | |-------|-------------|-----------------|-------------| | text-size-4 | 4px | 4px (fijo) | normal | | text-size-8 | 8px | 8px (fijo) | normal | | text-size-12 | 12px | 12px (fijo) | normal | | text-size-16 | 16px | 12px | relaxed (1.5) | | text-size-20 | 20px | 14px | relaxed (1.5) | | text-size-24 | 24px | 17px | relaxed (1.5) | | text-size-28 | 28px | 20px | normal (1.25) | | text-size-32-40 | 32-40px | 22-28px | normal (1.25) | | text-size-44-72 | 44-72px | 31-50px | snug (1.2) | | text-size-76-144 | 76-144px | 53-101px | tight (1.1) |

💡 Ejemplos Prácticos

Landing Page de SaaS

<section class="py-20 text-center">
  <h1 class="text-size-72 font-extrabold text-gray-900">
    Transforma tu Negocio
  </h1>
  <p class="text-size-24 text-gray-600 mt-4 max-w-2xl mx-auto">
    La plataforma todo-en-uno para equipos modernos
  </p>
  <button class="text-size-20 bg-blue-600 text-white px-8 py-4 rounded-lg mt-8">
    Comenzar Gratis
  </button>
</section>

E-commerce Product Card

<div class="bg-white rounded-lg shadow p-6">
  <span class="text-size-8 bg-red-600 text-white px-2 py-1 rounded uppercase font-bold">
    -30% OFF
  </span>
  <h3 class="text-size-32 font-bold mt-4">Producto Premium</h3>
  <p class="text-size-16 text-gray-600 mt-2">
    Descripción detallada del producto
  </p>
  <div class="flex items-baseline gap-2 mt-4">
    <span class="text-size-36 font-bold text-green-600">$69.99</span>
    <span class="text-size-20 line-through text-gray-400">$99.99</span>
  </div>
</div>

Dashboard Metrics

<div class="bg-white rounded-lg p-6 shadow">
  <div class="text-size-12 text-gray-500 uppercase tracking-wide font-semibold">
    Total de Ventas
  </div>
  <div class="text-size-48 font-bold text-gray-900 mt-2">
    $124,592
  </div>
  <div class="text-size-16 text-green-600 mt-1 flex items-center gap-1">
    <span>↑ 12%</span>
    <span class="text-size-12 text-gray-500">vs mes anterior</span>
  </div>
</div>

Blog Article

<article class="prose max-w-3xl mx-auto">
  <h1 class="text-size-64 font-bold text-gray-900">
    Título del Artículo
  </h1>
  
  <div class="text-size-16 text-gray-500 mt-4">
    Por Juan Pérez · 5 min de lectura
  </div>
  
  <h2 class="text-size-40 font-semibold text-gray-800 mt-12">
    Introducción
  </h2>
  
  <p class="text-size-20 text-gray-700 leading-relaxed mt-4">
    Contenido del artículo optimizado para lectura...
  </p>
  
  <h3 class="text-size-28 font-semibold text-gray-800 mt-8">
    Subsección Importante
  </h3>
  
  <p class="text-size-18 text-gray-600 mt-4">
    Más contenido detallado...
  </p>
</article>

🎯 Casos de Uso por Industria

SaaS / Tech

<!-- Hero -->
<h1 class="text-size-80">Scale Your Business</h1>
<!-- Feature cards -->
<h3 class="text-size-28">Powerful Analytics</h3>
<p class="text-size-18">Track your metrics in real-time</p>

E-commerce

<!-- Product title -->
<h2 class="text-size-36">Premium Leather Jacket</h2>
<!-- Price -->
<span class="text-size-44 font-bold">$299</span>
<!-- Description -->
<p class="text-size-16">Handcrafted Italian leather...</p>

Blog / Content

<!-- Article title -->
<h1 class="text-size-64">The Future of AI</h1>
<!-- Body text -->
<p class="text-size-20">In this comprehensive guide...</p>
<!-- Captions -->
<figcaption class="text-size-12">Source: Research 2024</figcaption>

Dashboard / Admin

<!-- Big numbers -->
<div class="text-size-56 font-bold">12,458</div>
<!-- Labels -->
<div class="text-size-12 uppercase">Active Users</div>
<!-- Stats -->
<div class="text-size-16 text-green-600">+8.2%</div>

🔧 Compatibilidad

Tailwind CSS: 4.x o superior
Node.js: ≥14.0.0
Navegadores:
- Chrome 79+
- Firefox 75+
- Safari 13.1+
- Edge 79+
- Todos soportan clamp() y CSS variables

❓ FAQ

¿Por qué text-size-* en lugar de text-*?

Para evitar confusión con las utilidades de color de Tailwind:

<!-- ❌ Confuso -->
<div class="text-blue-500">Color azul</div>
<div class="text-64">¿Color o tamaño? 🤔</div>

<!-- ✅ Claro -->
<div class="text-blue-500">Color azul ✅</div>
<div class="text-size-64">Tamaño 64px ✅</div>

¿Puedo sobrescribir variables por componente?

¡Sí! Usa inline styles o arbitrary values de Tailwind:

<!-- Inline style -->
<section style="--fluid-min-size: 16;">
  <h2 class="text-size-48">Título con mínimo 16px</h2>
</section>

<!-- Tailwind arbitrary value -->
<div class="[--fluid-scale-mobile:0.8]">
  <h2 class="text-size-64">Escalado 80% en mobile</h2>
</div>

¿Por qué text-size-4, 8 y 12 son fijos?

Son tamaños muy pequeños (badges, labels, metadata). Reducirlos más los haría ilegibles. Si necesitas que escalen, cambia el mínimo:

:root {
  --fluid-min-size: 6;  /* Ahora text-size-12 puede ser menor */
}

¿Puedo usar esto con Tailwind CSS 3?

No, este plugin requiere Tailwind CSS 4+ porque usa la directiva @utility. Para Tailwind 3, necesitarías un plugin JavaScript clásico.

🛠️ Desarrollo Local

# Clonar repo
git clone https://github.com/thanatosartcoder/tailwind-fluid-size.git
cd tailwind-fluid-size

# El plugin está listo para usar (es solo un archivo CSS)
# Pruébalo en tu proyecto con:
npm link

# En tu proyecto:
npm link tailwind-fluid-size

📄 Licencia

🤝 Contribuir

¡Las contribuciones son bienvenidas!

Fork el proyecto
Crea tu branch (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add: nueva característica')
Push al branch (git push origin feature/AmazingFeature)
Abre un Pull Request

💬 Soporte

🌟 Créditos

Creado con ❤️ para la comunidad de Tailwind CSS.

¿Te gusta el proyecto? ¡Dale una ⭐️ en GitHub!