Guía Completa para el uso de Tailwind CSS con WordPress
Bienvenido a nuestra comunidad, donde aprenderás paso a paso cómo integrar Tailwind CSS en tu sitio web de WordPress. Tailwind CSS es un potente framework que facilita la creación de páginas web con un diseño limpio y eficiente. En esta guía, te explicaremos cómo instalar el plugin, configurarlo correctamente y aplicar la configuración personalizada que utilizamos en Flowtitude, tanto para Gutenberg como para Bricks Builder. Con esta integración, podrás aprovechar al máximo las ventajas de Tailwind para desarrollar proyectos visualmente atractivos y optimizados.
Instalación del Plugin de Tailwind para Bricks Builder
Flowtitude te ofrece como parte de la membresía una colección de componentes y bloques de diseño basada en el framework Tailwind CSS y adaptada para funcionar de forma amigable con Bricks Builder. Tailwind CSS es el Framewok más utilizado actualmente y te ofrece soporte para trabajar con clases de utilidad, de forma que hagas diseños de calidad sin necesidad de ser un experto en CSS.
Flowtitude incluye todos los componentes de uso común que se requieren en un sitio web, como botones, menús desplegables, barras de navegación, pero también algunos componentes mas avanzados para que puedas usarlos con woocommerce o sitios dinámicos.
Todos los elementos se crean utilizando las clases de utilidad de Tailwind CSS, componentes creados con Tailwind CSS y en algiunos casos cuando se requiera usaremos JavaScript básico o componentes y clases de utilidad propias.
Además tambien te ofrecemos un plugin para tailwind CSS como ayuda con una configuración personalizada Tailwind sin necesidad de acceder al código y ya adaptado para nuestro ecosistema de bloques y WordPress. Para poder trabajar con Tailwind y nuestro ecosistema, es necesario tener instalado Winden o Yabe Siul.
Usando Flowtitude
Una de las posibles dificultades para trabajar con Tailwind CSS en comparación con otros frameworks para Bricks Builder es la falta de un conjunto básico de componentes, lo que dificulta la creación rápida de sitios web.
Es aquí donde entra en escena Flowtitude: es un complemento perfecto con un conjunto de componentes muy superior a lo que encontrarías con otros frameworks, especialmente diseñados para trabajar con CSS moderno y bricks Builder.
Incluye más de 40 tipos de componentes de interfaz de usuario, como botones, alertas, rutas de navegación, paginación y barras de navegación. Es adecuado tanto para la creación de sitios web dinámicos como para tiendas en línea.
Configuración básica de Tailwind con flowtitude
Una de las posibles dificultades para trabajar con Tailwind CSS en comparación con otros frameworks para Bricks Builder es la falta de un conjunto básico de componentes, lo que dificulta la creación rápida de sitios web.
Es aquí donde entra en escena Flowtitude: es un complemento perfecto con un conjunto de componentes muy superior a lo que encontrarías con otros frameworks, especialmente diseñados para trabajar con CSS moderno y bricks Builder.
Incluye más de 40 tipos de componentes de interfaz de usuario, como botones, alertas, rutas de navegación, paginación y barras de navegación. Es adecuado tanto para la creación de sitios web dinámicos como para tiendas en línea.
Configuración básica de Tailwind con flowtitude
Una vez instalado Winden sigue estos pequeños pasos para configurar el plugin y nuestro sistema de diseño optimizado para Bricks Builder o Gutenberg. Primero copia el siguiente código en el main.css, mas adelante explicaremos el funcionamiento de este archivo. Éste por ahora contiene el esqueleto básico a partir del cual configuraremos Tailwind CSS según necesitemos.
main.css / Styles
@tailwind base;
@tailwind components;
@tailwind utilities;
@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 definir el tamaño del content-grid y el espacio adicional (content-wide) */
--ft-container: 80rem;
--ft-padding-content-min-x: 1rem;
--ft-padding-content-max-x: 1rem;
--ft-padding-content-min-y: var(--ft-space-md);
--ft-padding-content-max-y: var(--ft-space-xl);
--ft-gap-content: var(--ft-space-md);
/* Variables para definir el tamaño de las utilidades de auto-grid y auto-fit */
--ft-card-xs: 12rem;
--ft-card-sm: 14rem;
--ft-card-md: 18rem;
--ft-card-lg: 24rem;
--ft-card-xl: 36rem;
}
}
@layer components {
}
@layer utilities {
}A contnuacion solo hay que pegar el cosdigo que mostramos a continuación en el archivo tailwind.config.js
Ten en cuenta que debes de tener configurado la versión 3.x de Tailwind. Si no se muestra el archivo de configuración solo debes de borrar el archivo main.css y guardar, automaticamente se generará.
tailwind.config.js
import ft-core from 'https://esm.sh/@flowtitude/ft-core';
import ft-variables from 'https://esm.sh/@flowtitude/ft-variables';
import containerQueries from 'https://esm.sh/@tailwindcss/container-queries';
export default {
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: [
ft-core,
ft-variables,
containerQueries,
],
corePlugins: {
preflight: false,
}
}Hay que sustituir la parte de los colores personalizados por los que precises en cada uno de tus proyectos respetando la nomenclatura de primary y secondary para que los componentes funcionen correctamente en cuanto a las clases de colores usadas.
Se han instalado tres plugins como parte de la configuración de Tailwind:
- El plugin principal de Tailwind ft-core,
- El plugin para extraer las variables de forma que las podamos utilizar como tokens css en nuestro CSS personalizado,
- y por último el plugin oficial de Queries Container.