Instalando flowtitude
Configurar tu plugin para usar Tailwind con Bricks Builder nunca fue tan sencillo, en esta página te explicamos como configurar y como funciona el plugin de flowtitide para Tailwind CSS de forma clara
Introducción
Ya sea que estés usando Yabe Siul o Winden sigue estos pequeños pasos para configurar el plugin y nuestro sistema de diseño optimizado para Bricks Builder.
Primero copia el siguiente código en el main.css o base.css según tu plugin, mas adelante explicaremos el funcionamiento de este archivo.
Éste por ahora contiene el esqueleto básico a partir del cual configuraremos Tailwind según necesitemos.
main.css / Styles
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
}
@layer components {
}
@layer utilities {
}A continuación enel caso de Yabe SIUL, solo tienes que modificar el preset.js según se indica a continuación para instalar el plugin. Te pongo el archivo completo para que sea mas sencillo su copiado.
Se ha incluido la configuración de los colores primary y secondary para facilitar la instalación, en ambos casos deberás sustituirlos por los colores corporativos de tu proyecto y/o añadir más colores en caso de ser necesario.
Aunque Yabe Siul tiene un wizard a través del cual se puede añadir colores y otro tipo de configuraciones, hemos preferido usar una configuración que resulte similar en ambos plugins de forma que puedas migrar de uno a otro en caso de necesidad.
preset.js
import flowtitude from 'https://esm.sh/flowtitude';
import containerQueries from 'https://esm.sh/@tailwindcss/container-queries'
import typography from 'https://esm.sh/@tailwindcss/typography'
/**
* @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: {
extend: {
"colors": {
"primary": {
50: "#FEF8EB",
100: "#FDF2D8",
200: "#FCE4B1",
300: "#FAD584",
400: "#F9C75D",
500: "#F7BA36",
600: "#E6A009",
700: "#AC7707",
800: "#765205",
900: "#3B2902",
950: "#1D1401"
},
"secondary": {
50: "#ECEFF4",
100: "#D9DFE8",
200: "#B2BED2",
300: "#8FA0BD",
400: "#6880A6",
500: "#4E6384",
600: "#3F4F6A",
700: "#2F3C50",
800: "#1E2633",
900: "#0F131A",
950: "#080A0D"
},
},
},
},
plugins: [
flowtitude,
containerQueries,
typography
],
corePlugins: {
preflight: false,
}
};
/* That's all, stop editing! Happy building. */
_merge(siul, presetConfig);Config
import flowtitude from 'https://esm.sh/flowtitude@0.1.0';
import containerQueries from 'https://esm.sh/@tailwindcss/container-queries'
import typography from 'https://esm.sh/@tailwindcss/typography'
export default {
darkMode: 'class',
theme: {
extend: {
"colors": {
"primary": {
50: "#FEF8EB",
100: "#FDF2D8",
200: "#FCE4B1",
300: "#FAD584",
400: "#F9C75D",
500: "#F7BA36",
600: "#E6A009",
700: "#AC7707",
800: "#765205",
900: "#3B2902",
950: "#1D1401"
},
"secondary": {
50: "#ECEFF4",
100: "#D9DFE8",
200: "#B2BED2",
300: "#8FA0BD",
400: "#6880A6",
500: "#4E6384",
600: "#3F4F6A",
700: "#2F3C50",
800: "#1E2633",
900: "#0F131A",
950: "#080A0D"
},
},
}
},
plugins: [
flowtitude,
containerQueries,
typography
],
corePlugins: {
preflight: false,
}
}Basicamente los cambios estan en la instalación del plugin de flowtitude, por una parte hemos añadido esta linea para importarlo
import flowtitude from 'https://esm.sh/flowtitude'
Y luego en la sección de plugins hemos añadido tambien la importación del plugin de query containers, ya que hacemos uso de el en nuestro sistema de diseño, aunque en un futuro sera incorporado y podremos eliminarlo, puedes aqui instalar tambien los plugins que necesites
plugins: [
flowtitude,
require('@tailwindcss/container-queries'),
],Configurando o añadiendo tu porpio CSS
Hemos comenzado con un esqueleto básico, el plugin ya lleva incorporado la tipografia fluida, espaciado fluido, color primario y secundario ademas de otros ajustes, puedes sobreescribir los valores y ajustarlos a tu medida usando variables (tal como se hara en un futuro con tailwind 4.0 ).
Te muestro a continuación el listado de variables que estamos utiliazando en este momento y donde lo deberias colocar para poder sobreescribir sin problemas.
@layer base {
:root {
//Variables para definir las fuentes a utilizar para las clases font-display y font-body
--ft-font-body: 'Helvetica', 'Arial';
--ft-font-display: 'Poppins', 'Helvetica', 'Arial';
//Variables para la tipografia fluida
--ft-text-xs: clamp(0.69rem, 0.05vi + 0.68rem, 0.72rem);
--ft-text-sm: clamp(0.83rem, 0.12vi + 0.80rem, 0.90rem);
--ft-text-base: clamp(1.00rem, 0.23vi + 0.94rem, 1.13rem);
--ft-text-lg: clamp(1.20rem, 0.38vi + 1.10rem, 1.41rem);
--ft-text-xl: clamp(1.44rem, 0.59vi + 1.29rem, 1.76rem);
--ft-text-2xl: clamp(1.73rem, 0.86vi + 1.51rem, 2.20rem);
--ft-text-3xl: clamp(2.07rem, 1.24vi + 1.76rem, 2.75rem);
--ft-text-4xl: clamp(2.49rem, 1.74vi + 2.04rem, 3.43rem);
--ft-text-5xl: clamp(2.99rem, 2.40vi + 2.37rem, 4.29rem);
--ft-text-6xl: clamp(3.58rem, 3.28vi + 2.74rem, 5.36rem);
--ft-text-7xl: clamp(4.30rem, 4.43vi + 3.16rem, 6.71rem);
--ft-text-8xl: clamp(5.16rem, 5.93vi + 3.64rem, 8.38rem);
--ft-text-9xl: clamp(6.19rem, 7.89vi + 4.16rem, 10.48rem);
//Variables para configurar el espaciado fluido
--ft-space-4xs: clamp(0.125rem, 0.1042rem + 0.1042vi, 0.1875rem);
--ft-space-3xs: clamp(0.25rem, 0.2292rem + 0.1042vi, 0.3125rem);
--ft-space-2xs: clamp(0.5rem, 0.4583rem + 0.2083vi, 0.625rem);
--ft-space-xs: clamp(0.75rem, 0.6875rem + 0.3125vi, 0.9375rem);
--ft-space-sm: clamp(1rem, 0.9167rem + 0.4167vi, 1.25rem);
--ft-space-md: clamp(1.5rem, 1.375rem + 0.625vi, 1.875rem);
--ft-space-lg: clamp(2rem, 1.8333rem + 0.8333vi, 2.5rem);
--ft-space-xl: clamp(3rem, 2.75rem + 1.25vi, 3.75rem);
--ft-space-2xl: clamp(4rem, 3.6667rem + 1.6667vi, 5rem);
--ft-space-3xl: clamp(6rem, 5.5rem + 2.5vi, 7.5rem);
--ft-space-4xl: clamp(8rem, 7.3333rem + 3.3333vi, 10rem);
--ft-space-5xl: clamp(9rem, 8.25rem + 3.75vi, 11.25rem);
--ft-space-6xl: clamp(12rem, 11rem + 5vi, 15rem);
--ft-space-7xl: clamp(14rem, 12.8333rem + 5.8333vi, 17.5rem);
--ft-space-8xl: clamp(16rem, 14.6667rem + 6.6667vi, 20rem);
--ft-space-4xs-3xs: clamp(0.125rem, 0.0625rem + 0.3125vi, 0.3125rem);
--ft-space-3xs-2xs: clamp(0.25rem, 0.125rem + 0.625vi, 0.625rem);
--ft-space-2xs-xs: clamp(0.5rem, 0.3542rem + 0.7292vi, 0.9375rem);
--ft-space-xs-sm: clamp(0.75rem, 0.5833rem + 0.8333vi, 1.25rem);
--ft-space-sm-md: clamp(1rem, 0.7083rem + 1.4583vi, 1.875rem);
--ft-space-md-lg: clamp(1.5rem, 1.1667rem + 1.6667vi, 2.5rem);
--ft-space-lg-xl: clamp(2rem, 1.4167rem + 2.9167vi, 3.75rem);
--ft-space-xl-2xl: clamp(3rem, 2.3333rem + 3.3333vi, 5rem);
--ft-space-2xl-3xl: clamp(4rem, 2.8333rem + 5.8333vi, 7.5rem);
--ft-space-3xl-4xl: clamp(6rem, 4.6667rem + 6.6667vi, 10rem);
--ft-space-4xl-5xl: clamp(8rem, 6.9167rem + 5.4167vi, 11.25rem);
--ft-space-5xl-6xl: clamp(9rem, 7rem + 10vi, 15rem);
--ft-space-6xl-7xl: clamp(12rem, 10.1667rem + 9.1667vi, 17.5rem);
--ft-space-7xl-8xl: clamp(14rem, 12rem + 10vi, 20rem);
--ft-space-jumbotron: clamp(9rem, 7rem + 10vi, 15rem);
// Variables que definen un borde redondeado para utilziar en los botones, tarjetas o personalizado (rounded-button, rounded-card y rounded-custom)
--ft-rounded-button: 0.25rem;
--ft-rounded-card: 1rem;
--ft-rounded-custom: 1.5rem;
// Variables que definen un grosor de borde para utilziar en los botones, tarjetas o personalizado (border-button, border-card y border-custom)
--ft-border-button: 0;
--ft-border-card: 3px;
--ft-border-custom: 0.8rem;
//Variables para definir el tamaño del content-grid y el espacio adicional (content-wide)
--ft-container: 80rem;
--ft-content-space: min(var(--ft-container), 90%);
--ft-wide-space: min(var(--ft-space-jumbotron), 5%);
--ft-padding-content-x: 1rem;
--ft-padding-content-y: 1rem;
//Variables para definir el tamaño de las utilidades de auto-grid y auto-fit
--ft-gap-content: var(--ft-space-md);
--ft-card-xs: calc( (var(--ft-container) - (var(--ft-gap-content) * 5)) / 6 );
--ft-card-sm: calc( (var(--ft-container) - (var(--ft-gap-content) * 4)) / 5 );
--ft-card-md: calc( (var(--ft-container) - (var(--ft-gap-content) * 3)) / 4 );
--ft-card-lg: calc( (var(--ft-container) - (var(--ft-gap-content) * 2)) / 3 );
--ft-card-xl: calc( (var(--ft-container) - (var(--ft-gap-content) * 1)) / 2 );
}
}No es necesario copiar todas las variables, aunque si lo haces no tiene ninguna consecuencia negativa y quizas es más fácil ver que valores son los aplicados actualmente por defecto y cambairlos en caso de ser necesario .
Como ves es muy sencillo de configurar, las variabels que no vas a modificar las puedes eliminar, al menos deberas tener las dos primeras que definen la tipografía a emplear en el sitio con font-body y font-display.
En otras secciones de la documentación explicaremos como funcionan el resto de variable sy como afectan al sistema de diseño.