¿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.
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
¿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-devLa versión más reciente de Laravel Mix requiere que instalemos la biblioteca cross-env. Ejecuta el siguiente comando:
npm install cross-env --save-devAgregue los siguientes scripts de compilación en el archivo package.json. Copia este código en la sección de scripts.
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.
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:
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 initAhora 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.
Paso 8: Instalar el plugin de PostCSS y postcss-nested
npm install postcssnpm 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.
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.
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.
