¡Novedades!

Nuevo plugin para Tailwind CSS

Leer más.

Fluid-tw

fluid.tw es un plugin para Tailwind CSS diseñado para extender las capacidades de diseño responsivo de Tailwind, permitiendo a los desarrolladores crear interfaces más fluidas y adaptables.

Este plugin facilita una transición más suave y natural entre diferentes tamaños de pantalla, asegurando que los elementos de la interfaz de usuario mantengan una apariencia y funcionalidad óptimas en una amplia gama de dispositivos.

Instalación

Este plugin requiere de una instalación un poco mas elaborada ya que hay que asegurar que se usan siempre las mismas unidades de medida y establecer unos parámetros mínimos de configuración, así pues la instalación seria la siguiente:

Yabe SIUL
Winden
...
import { fluidExtractor, fluidCorePlugins, defaultThemeScreensInRems, defaultThemeFontSizeInRems } from 'https://esm.sh/fluid-tailwind@0.1.6?bundle-deps&external=fs';
...

/**
 * @type {import('lodash').merge}
 */
const _merge = require('lodash.merge');

/**
 * The Tailwind CSS configuration required by the SIUL plugin.
 *
 * @type {import('tailwindcss').Config} 
 */
let siul = {};

/* The autogenerated Tailwind CSS configuration from the Wizard goes below. */

//-@-wizard

/* Your custom Tailwind CSS configuration goes below. */

/**
 * @type {import('tailwindcss').Config} 
 */
let presetConfig = {
    darkMode: 'class',
    theme: {
        fontSize: defaultThemeFontSizeInRems,
        screens: defaultThemeScreensInRems,
        fluid: {
            defaultScreens: ['26rem', '64rem'],
        },
        extend: {
        },
    },
    plugins: [
        ...
        fluidCorePlugins,
        ...
        
    ],
    content: {
        files: [],
        extract: fluidExtractor()
    },
    corePlugins: {
        preflight: false,
    }
};

/* That's all, stop editing! Happy building. */

_merge(siul, presetConfig);
import { fluidExtractor, fluidCorePlugins, defaultThemeScreensInRems, defaultThemeFontSizeInRems } from 'https://esm.sh/fluid-tailwind@0.1.6?bundle-deps';

export default {
    darkMode: 'class',
    theme: {
      fontSize: defaultThemeFontSizeInRems,
      screens: defaultThemeScreensInRems,
fluid: {
            defaultScreens: ['26rem', '64rem'],
        },
        extend: {
        }
    },
    plugins: [
        ...
        fluidCorePlugins,
        ...
        
    ],
    content: {
        files: [],
        extract: fluidExtractor,
    },
    corePlugins: {
        preflight: false,
    }
}

Primero que nada volver a insistir en que cada vez que pongo en el codigo tres puntos significa que puede haber mas lineas de código antes o después. Una vez dicho esto vamos a explicar todo lo que hemos añadido a nuestra configuración.

El primer cambio que hemos hecho es importar el plugin tal como lo venimos haciendo, esta vez la forma de importar es un poco mas compleja, en esta linea estamos haciendo lo siguiente:

import { fluidExtractor, fluidCorePlugins, defaultThemeScreensInRems, defaultThemeFontSizeInRems } from 'https://esm.sh/fluid-tailwind@0.1.6?bundle-deps&external=fs';

Esta linea de código importa varios módulos y funciones desde el paquete 'fluid-tailwind' vamos a ver el desglose del codigo mostrado anteriormente:

'fluidExtractor' es una función que se usa para configurar la extracción de contenido en el archivo 'tailwind.config.js'   de forma que Tailwind CSS pueda reconocer las clases que utilizan  la sintaxis fluida (‘~’) mediante el siguiente fragmento:

content: {
  files: [],
  extract: fluidExtractor(),
},

'defaultThemeScreensInRems' y  'defaultThemeFontSizeInRems' este fragmento sirve para expresar las unidades en rem para los tamaños de fuente y pantallas de forma que funciones correctamente.

theme: {
   fontSize: defaultThemeFontSizeInRems,
   screens: defaultThemeScreensInRems,
   fluid: {
   	defaultScreens: ['26rem', '64rem'],
   },
...

En esta última linea del codigo que mostramos arriba estamos definiendo el intervalo donde debe actuar los tamaños fluidos (min max)

Primeros pasos y modo de empleo

El plugin soporta cualquier tipo de clase de utilidad,  siempre que cumpla los estandares de accesibilidad, no obstante puedes ovbiar esta restricción usando la siguiente configuración:

plugins: [
    fluidCorePlugins({
      checkSC144: false // default: true
    })
  ]
}
  • Para su uso lo principal es empezar la clase de utilidad que queremos usar con el prefijo ~
  • Las clases de utilidad se definen añadiendo el valor inicial y final separado por el caracter /
  • Los valores inicial y final deben de estar expresados en la misma unidad, preferente rem, es por ello que establecimos en la configuración la unidad por defecto para los tamaños de fuente y pantalla

Veamos algún uso básico para ilustrar su utilización

<button class="bg-sky-500 ~px-4/8 ~py-2/4 ~text-sm/xl ...">Fluid button</button>

El plugin se puede usar valores arbitrarios, modificadores para puntos de ruptura e incluso soporta el plugin oficial de contenedores