tailwind-elasticss
Version:
Elastic responsive utilities for Tailwind CSS v4 with intelligent clamp() and container query support
389 lines (331 loc) • 11.2 kB
CSS
/* styles.css or app.css */
@import "tailwindcss";
/* ========================================
VARIABLES CSS PARA MIN/MAX
======================================== */
/* Define valor mínimo personalizado para width/height */
@utility fluid-min-* {
--fluid-min: --value([*]);
}
/* Define valor máximo personalizado para width/height */
@utility fluid-max-* {
--fluid-max: --value([*]);
}
/* Define valor mínimo personalizado para max-width/max-height */
@utility fluid-max-w-min-* {
--fluid-max-w-min: --value([*]);
}
/* Define valor máximo personalizado para max-width/max-height */
@utility fluid-max-w-max-* {
--fluid-max-w-max: --value([*]);
}
/* Define valor mínimo personalizado para font-size */
@utility fluid-text-min-* {
--fluid-text-min: --value([*]);
}
/* Define valor máximo personalizado para font-size */
@utility fluid-text-max-* {
--fluid-text-max: --value([*]);
}
/* Define valor mínimo personalizado para line-height */
@utility fluid-leading-min-* {
--fluid-leading-min: --value([*]);
}
/* Define valor máximo personalizado para line-height */
@utility fluid-leading-max-* {
--fluid-leading-max: --value([*]);
}
/* ========================================
VARIABLES DE CONTROL GLOBAL
======================================== */
/* Define el multiplicador de escala actual (por defecto: 1) */
@utility current-scale-* {
--current-scale: --value([*]);
}
/* Define el viewport mínimo para width (por defecto: 20rem) */
@utility vw-min-* {
--vw-min: --value([*]);
}
/* Define el viewport mínimo para height (por defecto: 20rem) */
@utility vh-min-* {
--vh-min: --value([*]);
}
/* Define el multiplicador mínimo (por defecto: 0.88 = 88%) */
@utility fluid-min-mult-* {
--fluid-min-mult: --value([*]);
}
/* Define el multiplicador máximo (por defecto: 1.2 = 120%) */
@utility fluid-max-mult-* {
--fluid-max-mult: --value([*]);
}
/* ========================================
UTILIDADES FLUID PRINCIPALES
======================================== */
/*
* Width con fluid inteligente
* Usa viewport para escalado fluido entre viewports 320px (móvil) y 1920px (desktop)
* Fórmula lineal: min + (max - min) * ((100vw - 320px) / (1920 - 320))
*/
@utility w-fluid-* {
--current-scale: 1;
--vw-min: 20rem;
--fluid-min-mult: 0.88;
--fluid-max-mult: 1.2;
/* Primero captura el valor en una variable */
--fluid-base: --value([*]);
/* Luego usa esa variable en los cálculos */
--base: calc(var(--fluid-base) * var(--current-scale));
--min: calc(var(--fluid-base) * var(--fluid-min-mult));
--max: calc(var(--fluid-base) * var(--fluid-max-mult));
width: clamp(
var(--min),
calc(var(--min) + (var(--max) - var(--min)) * (100vw - var(--vw-min)) / (100vw - var(--vw-min))),
var(--max)
);
}
/*
* Height con fluid inteligente
* Usa viewport para escalado fluido entre viewports 320px y 1080px
* Fórmula lineal: min + (max - min) * ((100vh - 320px) / (1080 - 320))
*/
@utility h-fluid-* {
--current-scale: 1;
--vh-min: 20rem;
--fluid-min-mult: 0.88;
--fluid-max-mult: 1.2;
/* Primero captura el valor en una variable */
--fluid-base: --value([*]);
/* Luego usa esa variable en los cálculos */
--base: calc(var(--fluid-base) * var(--current-scale));
--min: calc(var(--fluid-base) * var(--fluid-min-mult));
--max: calc(var(--fluid-base) * var(--fluid-max-mult));
height: clamp(
var(--min),
calc(var(--min) + (var(--max) - var(--min)) * (100vh - var(--vh-min)) / (100vh - var(--vh-min))),
var(--max)
);
}
/*
* Font-size con fluid inteligente
* - Si defines --fluid-text-min/--fluid-text-max, los usa
* - Si no, calcula automáticamente (min: 88%, max: 120%)
*/
@utility text-fluid-* {
--current-scale: 1;
--vw-min: 20rem;
--fluid-min-mult: 0.88;
--fluid-max-mult: 1.2;
/* Primero captura el valor en una variable */
--fluid-base: --value([*]);
/* Luego usa esa variable en los cálculos */
--base: calc(var(--fluid-base) * var(--current-scale));
--min: calc(var(--fluid-base) * var(--fluid-min-mult));
--max: calc(var(--fluid-base) * var(--fluid-max-mult));
font-size: clamp(
var(--min),
calc(var(--min) + (var(--max) - var(--min)) * (100vw - var(--vw-min)) / (100vw - var(--vw-min))),
var(--max)
);
}
/*
* Line-height con fluid inteligente
* - Si defines --fluid-leading-min/--fluid-leading-max, los usa
* - Si no, calcula automáticamente (min: 88%, max: 120%)
*/
@utility leading-fluid-* {
--current-scale: 1;
--vw-min: 20rem;
--fluid-min-mult: 0.88;
--fluid-max-mult: 1.2;
/* Primero captura el valor en una variable */
--fluid-base: --value([*]);
/* Luego usa esa variable en los cálculos */
--base: calc(var(--fluid-base) * var(--current-scale));
--min: calc(var(--fluid-base) * var(--fluid-min-mult));
--max: calc(var(--fluid-base) * var(--fluid-max-mult));
line-height: clamp(
var(--min),
calc(var(--min) + (var(--max) - var(--min)) * (100vw - var(--vw-min)) / (100vw - var(--vw-min))),
var(--max)
);
}
/* ========================================
UTILIDADES FLUID CON CONTAINER QUERIES
======================================== */
/*
* Width con fluid responsive a container
* Se adapta según el tamaño del contenedor padre
* - Contenedor < 400px: más compresión (85% - 115%)
* - Contenedor 400px-800px: balance (90% - 130%)
* - Contenedor > 800px: valor fijo
*/
@utility w-fluid-cq-* {
--fluid-base: --value([*]);
--fluid-cq-min-ratio: 0.85;
--fluid-cq-max-ratio: 1.15;
width: clamp(
var(--fluid-min, calc(var(--fluid-base) * var(--fluid-cq-min-ratio))),
var(--fluid-base),
var(--fluid-max, calc(var(--fluid-base) * var(--fluid-cq-max-ratio)))
);
@container (min-width: 400px) {
width: clamp(
var(--fluid-min, calc(var(--fluid-base) * 0.9)),
var(--fluid-base),
var(--fluid-max, calc(var(--fluid-base) * 1.3))
);
}
@container (min-width: 800px) {
width: var(--fluid-override, var(--fluid-base));
}
}
/*
* Height con fluid responsive a container
*/
@utility h-fluid-cq-* {
--fluid-base: --value([*]);
--fluid-cq-min-ratio: 0.85;
--fluid-cq-max-ratio: 1.15;
height: clamp(
var(--fluid-min, calc(var(--fluid-base) * var(--fluid-cq-min-ratio))),
var(--fluid-base),
var(--fluid-max, calc(var(--fluid-base) * var(--fluid-cq-max-ratio)))
);
@container (min-width: 400px) {
height: clamp(
var(--fluid-min, calc(var(--fluid-base) * 0.9)),
var(--fluid-base),
var(--fluid-max, calc(var(--fluid-base) * 1.3))
);
}
@container (min-width: 800px) {
height: var(--fluid-override, var(--fluid-base));
}
}
/*
* Font-size con fluid responsive a container
* Se adapta según el tamaño del contenedor padre
* - Contenedor < 400px: más compresión (85% - 115%)
* - Contenedor 400px-800px: balance (90% - 130%)
* - Contenedor > 800px: valor fijo
*/
@utility text-fluid-cq-* {
--fluid-text-base: --value([*]);
--fluid-text-cq-min-ratio: 0.85;
--fluid-text-cq-max-ratio: 1.15;
font-size: clamp(
var(--fluid-text-min, calc(var(--fluid-text-base) * var(--fluid-text-cq-min-ratio))),
var(--fluid-text-base),
var(--fluid-text-max, calc(var(--fluid-text-base) * var(--fluid-text-cq-max-ratio)))
);
@container (min-width: 400px) {
font-size: clamp(
var(--fluid-text-min, calc(var(--fluid-text-base) * 0.9)),
var(--fluid-text-base),
var(--fluid-text-max, calc(var(--fluid-text-base) * 1.3))
);
}
@container (min-width: 800px) {
font-size: var(--fluid-text-override, var(--fluid-text-base));
}
}
/*
* Line-height con fluid responsive a container
* Se adapta según el tamaño del contenedor padre
* - Contenedor < 400px: más compresión (85% - 115%)
* - Contenedor 400px-800px: balance (90% - 130%)
* - Contenedor > 800px: valor fijo
*/
@utility leading-fluid-cq-* {
--fluid-leading-base: --value([*]);
--fluid-leading-cq-min-ratio: 0.85;
--fluid-leading-cq-max-ratio: 1.15;
line-height: clamp(
var(--fluid-leading-min, calc(var(--fluid-leading-base) * var(--fluid-leading-cq-min-ratio))),
var(--fluid-leading-base),
var(--fluid-leading-max, calc(var(--fluid-leading-base) * var(--fluid-leading-cq-max-ratio)))
);
@container (min-width: 400px) {
line-height: clamp(
var(--fluid-leading-min, calc(var(--fluid-leading-base) * 0.9)),
var(--fluid-leading-base),
var(--fluid-leading-max, calc(var(--fluid-leading-base) * 1.3))
);
}
@container (min-width: 800px) {
line-height: var(--fluid-leading-override, var(--fluid-leading-base));
}
}
/* ========================================
UTILIDADES FLUID PARA MAX-WIDTH
======================================== */
/*
* Max-width con fluid inteligente
* - Si defines --fluid-max-w-min/--fluid-max-w-max, los usa
* - Si no, calcula automáticamente (min: 88%, max: 120%)
*/
@utility max-w-fluid-* {
max-width: clamp(
var(--fluid-max-w-min, calc(--value([*]) * 0.88)),
--value([*]),
var(--fluid-max-w-max, calc(--value([*]) * 1.2))
);
}
/*
* Max-height con fluid inteligente
* Mismo comportamiento que max-w-fluid
*/
@utility max-h-fluid-* {
max-height: clamp(
var(--fluid-max-w-min, calc(--value([*]) * 0.88)),
--value([*]),
var(--fluid-max-w-max, calc(--value([*]) * 1.2))
);
}
/* ========================================
UTILIDADES FLUID PARA MAX-WIDTH CON CONTAINER QUERIES
======================================== */
/*
* Max-width con fluid responsive a container
* Se adapta según el tamaño del contenedor padre
* - Contenedor < 400px: más compresión (85% - 115%)
* - Contenedor 400px-800px: balance (90% - 130%)
* - Contenedor > 800px: valor fijo
*/
@utility max-w-fluid-cq-* {
max-width: clamp(
var(--fluid-max-w-min, calc(--value([*]) * 0.85)),
--value([*]),
var(--fluid-max-w-max, calc(--value([*]) * 1.15))
);
@container (min-width: 400px) {
max-width: clamp(
var(--fluid-max-w-min, calc(--value([*]) * 0.9)),
--value([*]),
var(--fluid-max-w-max, calc(--value([*]) * 1.3))
);
}
@container (min-width: 800px) {
max-width: var(--fluid-max-w-override, --value([*]));
}
}
/*
* Max-height con fluid responsive a container
*/
@utility max-h-fluid-cq-* {
max-height: clamp(
var(--fluid-max-w-min, calc(--value([*]) * 0.85)),
--value([*]),
var(--fluid-max-w-max, calc(--value([*]) * 1.15))
);
@container (min-width: 400px) {
max-height: clamp(
var(--fluid-max-w-min, calc(--value([*]) * 0.9)),
--value([*]),
var(--fluid-max-w-max, calc(--value([*]) * 1.3))
);
}
@container (min-width: 800px) {
max-height: var(--fluid-max-w-override, --value([*]));
}
}