Usar Tailwind en WordPress

[ 4 noviembre 2024 ] [ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

Suscríbete a DecodeCMS:

En un artículo anterior habíamos visto cómo usar BootStrap en WordPress, sin embargo otro de los frameworks CSS para el diseño de interfaces es Tailwind. En este artículo veremos como usarlo en WordPress.

Generalidades

Tailwind es un framework de CSS que permite diseñar y personalizar interfaces web mediante clases utilitarias predefinidas. Tailwind se centra en ofrecer clases individuales para aplicar estilos como márgenes, colores, fuentes, y más, a cualquier elemento.

En WordPress, lo ideal es que Tailwind sea implementado como parte del tema que tenemos activo.

Resultado Final

En este artículo veremos cómo usar Tailwind en una página específica de WordPress.
Usaremos uno de los componentes para mostrar precios en una página, al final obtendremos algo similar a lo siguiente:

Agregar script Tailwind en WordPress

Primero necesitamos hacer referencia a Tailwind desde WordPress, la forma más simple es a través de la siguiente URL: https://cdn.tailwindcss.com

Ten en cuenta que esta URL descargará el código y lo ejecutará, por lo que sólo es recomendable cargarlo en la página o páginas en donde usarás Tailwind, el siguiente código ya contempla eso.

Asumiendo que tienes una página con el slug «pagina-tailwind», entonces puedes evaluar usar el siguiente código como parte de tu archivo functions.php de tu tema hijo.

add_action( 'wp_enqueue_scripts', 'register_styles_tailwind' );
function register_styles_tailwind() {
	wp_register_script( 'tailwind-script', 'https://cdn.tailwindcss.com',[],'3.4.14' );
    // Cambiar el slug de la página
    if (is_page('pagina-con-tailwind')) { 
        wp_enqueue_script('tailwind-script');
    }
}

Obteniendo el código HTML desde Tailwind

Podemos usar alguno de los componentes, desde el menú Componentes de la página de Tailwind o directamente desde esta enlace

Ubicamos algún componente que nos interese, por ejemplo:

Luego usamos la opción de «code» para ver el código HTML y copiamos el código. (también podemos usar el ícono de copiar)

Componente de Tailwind en una página de WordPress

Finalmente podemos crear una página en WordPress, agregar un bloque HTML y pegar el código de Tailwind.

Conclusión

Como hemos podido comprobar, es posible agregar el framework de Tailwind a WordPress y usarlo en determinadas páginas de nuestro sitio web de manera simple.