Cómo instalar TailwindCSS en un child theme de WordPress

¿Qué es TailwindCSS?

Es un framework CSS basado en la metodología «Utility-first». Una metodología que resuelve problemas comunes de especificidad utilizando clases de CSS de bajo nivel, evita el uso de la declaración !important y tiene un CSS fácil de escalar y de mantener.

Tailwind Labs · GitHub

Con TailwindCSS no tendrás que nombrar clases, una de las razones por las que el CSS se ensucia y se convierte en algo difícil de mantener. Gracias al sistema de diseño que tiene junto con las Utiliti-first vas a poder hacer cambios en tus diseño sin riesgo de romper páginas y componentes.

Posee otras características interesantes que le hacen destacar sobre el resto, se centra sobre todo en componentes reutilizables, el diseño se basa en la técnica mobile-first aplicando el modo responsive de forma inline. De igual forma los estados de los componentes y el «dark mode» también se controlan con pseudo-clases inline.

A través del archivo tailwind.config.js se puede extender y modificar el framework. Tiene una gran comunidad y un ecosistemas de plugins que cubren cualquier necesidad que pueda tener tu proyecto. En sus últimas actualizaciones ha incorporado muchas nuevas características desatacando una directiva llamada «@apply» con la que se pueden personalizar las clases de TailwindCSS.

Y mucho más… es un proyecto que crece y qué incorpora nuevas características en cada actualización, lo que hace que sea para mi el mejor framework de CSS con el que he trabajado.

En definitiva, con TailwindCSS vas a poder construir lo que quieras.

¿Qué cosas puedo hacer con TailwindCSS en WordPress? casos de uso

Analizando todas las características anteriores puedo sacar algunas conclusiones de uso como:

  • TailwindCSS se puede incorporar en los temas de WordPress
  • Se pueden crear colecciones de bloques o de componentes prediseñados (por ejemplo para una intranet, tienda online…)
  • Desarrollar plantillas de tema y partes de plantilla (template parts)
  • Diseñar colecciones de patrones de temas
  • Crear plugin de componentes o bloques dinámicos añadiendo alpine.js
  • Implementar el «dark mode» del sitio

¿Por qué con WordPress?

VENTAJAS

  • Diseño de elementos de HTML y componentes mucho más rápido
  • Framework probado y estable en producción
  • Las clases funcionan en los bloques de Gutenberg (se requiere encolar la hoja de estilos en el editor)
  • Sistema de diseño incorporado
  • Aplica responsive donde lo necesites
  • Beneficios en la caché
  • Curva de aprendizaje baja
  • Tiene una gran comunidad

INCONVENIENTES

  • Clases en linea, puede no gustarte o pienses que no es una buena practica de CSS
  • Necesitas saber de CSS, para saber el por qué del nombre de las clases
  • En algunos casos necesitas conocimientos del manejo de un terminal

Hago desarrollos web con WordPress a medida y profesionales

Me he especializado en crear sitios potentes, dinámicos y profesionales para particulares y agencias. Quiero formar parte de tu idea de negocio. Quiero ayudarte a sacarlo adelante. ¿Te interesa contratar un programador especializado en WordPress? ¡No lo dudes!

¿Cómo lo instalo en un theme o child theme de WordPress?

Paso 1: Necesitamos tener instalado Nodejs (lo puedes descargar en el siguiente enlace https://nodejs.org/en/) y NPM como gestor de paquetes de JavaScript. La instalación se realiza a través de la consola y se puede instalar de forma global ejecutando el siguiente comando:

npm install -g npm@latest

Paso 2: Una vez que tenemos todo instalado podemos iniciar NPM en el directoria raíz de nuestro tema (/wp-content/themes/{yourtheme}) o tema hijo (/wp-content/themes/{yourtheme}/{yourchildtheme}) ejecutamos el siguiente comando:

npm init

En este punto, verás como se ha creado un archivo llamado package.json, un archivo que recoge todo el manifiesto de nuestro proyecto.

Paso 3: Instalamos y configuramos Laravel Mix como dependencia de desarrollo. Es un paquete que proporciona una capa sobre Webpack y crea un flujo de trabajo moderno utilizando múltiples preprocesadores de CSS y JavaScript. Muy útil para proyectos basados en PHP. Ejecuta el siguiente comando:

npm install laravel-mix --save-dev

La versión más reciente de Laravel Mix requiere que instalemos la biblioteca cross-env. Ejecuta el siguiente comando:

npm install cross-env --save-dev

Agregue los siguientes scripts de compilación en el archivo package.json. Copia este código en la sección de scripts.

scripts: {
    "dev": "npm run development",
    "prod": "npm run production",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}

Los 3 scripts mas usados son: «dev», «prod» y «watch», puedes utilizarlos con los siguientes comandos según el estado de tu desarrollo.

npm run dev
npm run prod
npm run watch

Por último, cree un archivo llamado webpack.mix.js en la carpeta raíz del proyecto. En este archivo irá toda la configuración de Laravel Mix. Si utilizamos VueJS, TailwindCSS, Bootstrap, SCSS… cualquier cosas que necesitemos compilar deberá ir en este archivo. Por el momento introduce esta linea de código en el archivo creado.


const mix = require('laravel-mix');

Ahora ya podemos usar el objeto «mix» para encadenar los comandos que necesitemos.

Paso 4: Instalar TailwindCSS, ejecutando el siguiente comando en consola:

npm install tailwindcss

Paso 5: Crear el directorio resources o src y el directorio css donde se almacenarán todos los assets no compilados.

/wp-content/themes/{yourtheme}/resources/css
/wp-content/themes/{yourtheme}/src/css

Paso 6: Crear archivo theme.css, este es el punto de partida para compilar todo el CSS. Aquí se podrán incluir todos los componentes, fuentes… El archivo theme.css llevará el siguiente código:

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Paso 7: Crear archivo de configuración de TailwindCSS.
Es opcional, pero mediante este archivo se pueden personalizar colores, fuentes, tamaños, prácticamente todo lo que se necesite para personalizar TailwindCSS. Para crearlo hay que ejecutar:

npx tailwindcss init

Ahora deberías de ver un archivo llamado tailwind.config.js al que le puedes añadir algunas configuraciones. Si tu tema tiene un sistema de carpetas mas complejo, tendrás que añadir o quitar reglas del «purge». Este archivo irá creciendo conforme a las necesidades del proyecto.

module.exports = {
  mode: 'jit',
	purge: {
		content: [
			'./src/**/*.php',
			'./template-parts/**/*.php',
			'./*.php',
			'./inc/**/*.php',
			'./inc/*.php',
			'./src/**/*.js',
		],
	},
	darkMode: false, //you can set it to media(uses prefers-color-scheme) or class(better for toggling modes via a button)
	theme: {
		extend: {},
	},
	variants: {},
	plugins: [],
}

Paso 8: Instalar el plugin de PostCSS y postcss-nested

npm install postcss
npm install postcss-nested

Paso 9: Configurar Laravel Mix, como ya hemos creado en un paso anterior el archivo webpack.mix.js, le añadimos las reglas de compilación de JavaScript y CSS al archivo. Copia este código y modifica la ruta según tengas montado el sistema de carpetas en tu proyecto.

const mix = require('laravel-mix');

//Directory that contains our un-compiled CSS
mix.postCss('resources/css/theme.css', 'css', [
	require('tailwindcss'),
	require('postcss-nested')
])
.options({
	processCssUrls: false
});

Paso 10: Encolamos los estilos compilados tanto en el frontend como en el editor.
Copia y pega este código en el archivo functions.php de tu child theme.

/**
 * Proper way to enqueue scripts and styles.
 */
function tail_theme_name_scripts() {
    wp_enqueue_style( 'tail_estilos', get_stylesheet_directory_uri().'/css/theme.css', array(), 1.0 );
}
add_action( 'wp_enqueue_scripts', 'tail_theme_name_scripts' );

/**
 * Enqueue WordPress theme styles within Gutenberg.
 */
function tail_tailwindcss_styles() {
	wp_enqueue_style( 'tail_editor', get_theme_file_uri( '/css/theme.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'tail_tailwindcss_styles' );

Con estos 10 pasos hemos instalado TailwindCSS y algunas de sus dependencias en un tema de WordPress, preparado y listo para utilizar sus clases, tanto en plantillas, snippets, plugins, bloques de Gutenberg etc.

Espero que este tutorial te haya servido de ayuda. Te dejo unos enlaces de interés y recursos sobre TailwindCSS.

https://www.alpinetoolbox.com/

https://tailwindcss.com/

https://tailwindui.com/

https://github.com/aniftyco/awesome-tailwindcss

Sobre el autor