Agregue Tailwind CSS a temas de WordPress nuevos y existentes trucos CSS - Aprender Marketing
CSS

Agregue Tailwind CSS a temas de WordPress nuevos y existentes trucos CSS

En los 15 años o más desde que comencé a crear sitios web de WordPress, nada ha tenido un mayor impacto en mi productividad, y en mi capacidad para disfrutar del desarrollo front-end, que agregar CSS viento de cola a mi flujo de trabajo (y no está cerca).

Cuando comencé a trabajar con Tailwind, había un repositorio actualizado de la primera página de GitHub que describía cómo usar Tailwind con WordPress. Este repositorio no se ha actualizado desde 2019. Pero esta falta de actualizaciones no es una declaración sobre la utilidad de Tailwind para los desarrolladores de WordPress. Al permitir que Tailwind haga lo que Tailwind hace mejor, mientras WordPress sigue siendo WordPress, es posible aprovechar las mejores partes de ambas plataformas y crear sitios web modernos en menos tiempo.

El ejemplo de configuración mínima de este artículo pretende proporcionar una actualización de este repositorio de configuración original, rediseñado para funcionar con las últimas versiones de Tailwind y WordPress. Este enfoque se puede ampliar para trabajar con todo tipo de temas de WordPress, desde un tema predeterminado ramificado hasta algo completamente normal.

Por qué los desarrolladores de WordPress deberían estar interesados ​​en Tailwind

Antes de hablar sobre la configuración, vale la pena regresar y discutir cómo funciona Tailwind y qué significa en el contexto de WordPress.

Tailwind le permite diseñar elementos HTML usando clases de ayuda existentes, eliminando la necesidad de escribir la mayor parte o todo el CSS en su sitio. (Piense en clases como hidden por display: hidden o uppercase por text-transform: uppercase.) Si ha usado marcos como Bootstrap y Foundation en el pasado, la mayor diferencia que encontrará con Tailwind CSS es su enfoque de diseño vacío, combinado con la facilidad de usar solo CSS, con solo el restablecimiento de CSS habilitado de manera predeterminada. permitir sitios altamente optimizados sin incitar a los desarrolladores a la estética integrada en el propio marco.

Además, a diferencia de muchos otros marcos CSS, es imposible cargar una versión «estándar» de Tailwind CSS desde un CDN existente. Con todas sus clases útiles incluidas, el archivo CSS generado simplemente sería demasiado grande. Tailwind ofrece „„Reproducir CDN“Pero no está destinado a la producción, ya que reduce significativamente los beneficios de productividad de Tailwind. (Sigue siendo útil si desea hacer algunos prototipos rápidos o experimentar con Tailwind sin instalarlo ni configurar un proceso de compilación).

Esta necesidad de usar el proceso de compilación de Tailwind para crear un subconjunto de clases de marco útiles específicas para su proyecto hace que sea importante comprender cómo Tailwind decide qué clases auxiliares incluir y cómo este proceso afecta el uso de clases auxiliares en el editor de WordPress.

Finalmente, Tailwind es agresivo Verificación previa (su versión de reinicio de CSS) significa que algunas partes de WordPress no se adaptan bien al marco de configuración predeterminado.

Comencemos por ver dónde Tailwind funciona bien con WordPress.

Donde Tailwind y WordPress funcionan bien juntos

Para que Tailwind funcione bien sin una personalización significativa, debe actuar como el CSS principal de una página; esto elimina una serie de usos en WordPress.

Si está creando un complemento de WordPress y necesita habilitar CSS desde el front-end, por ejemplo, Preflight de Tailwind entrará en conflicto directo con el tema activo. Del mismo modo, si necesita diseñar el área administrativa de WordPress, fuera del editor, se pueden anular sus propios estilos de área administrativa.

Hay formas de solucionar ambos: puede deshabilitar Preflight y agregar un prefijo a todas sus clases útiles, o puede usar PostCSS para agregar un espacio de nombres a todos sus selectores. De cualquier manera, su configuración y flujo de trabajo se volverán más complicados.

Pero si está creando un tema, Tailwind encaja perfectamente justo después de sacarlo. He tenido éxito en la creación de temas personalizados utilizando tanto el editor clásico como el editor de bloques, y soy optimista de que a medida que avanzan las ediciones del sitio, habrá una serie de funciones de edición en todo el sitio que funcionan bien con Tailwind.

En su entrada de blog «La edición completa del sitio de Gutenberg no tiene que estar completa, “Tammy Lister describe la edición de todo el sitio como un conjunto de características individuales que se pueden percibir en parte o en su totalidad. Es poco probable que la funcionalidad de edición completa del sitio de Global Styles funcione alguna vez con Tailwind, pero es probable que funcionen muchas otras características.

Entonces: crea un tema, Tailwind está instalado y configurado y agrega clases de ayuda con una sonrisa en su rostro. Pero, ¿funcionarán estas clases de ayuda en el Editor de WordPress?

Con planificación, ¡sí! Las clases de ayuda estarán disponibles para su uso en el editor, siempre que decida cuáles desea usar con anticipación. No puede abrir el editor y usar todas y cada una de las clases auxiliares de Tailwind; horneado en el enfoque de Tailwind en el rendimiento es la restricción es incluir solo las clases útiles que usa su tema, por lo que debe decirle a Tailwind con anticipación cuáles son necesarias en el editor, aunque no están presentes en ninguna otra parte de su código.

Hay varias formas de hacer esto: Puede crear un lista segura en su archivo de configuración de Tailwind; puede incluir comentarios que contengan listas de clases, junto con el código de bloque personalizado que querrá diseñar en el editor de bloques; incluso puede simplemente crear un archivo que enumere todas las clases específicas de su editor y decirle a Tailwind que lo incluya como uno de los archivos de origen que realiza un seguimiento de los nombres de las clases.

La necesidad de comprometerme con clases editoriales por adelantado nunca me ha tenido ocupado, pero este sigue siendo el aspecto de la relación entre Tailwind y WordPress que más me preguntan.

Tema mínimo de WordPress con integración mínima con Tailwind CSS

Comencemos con el tema de WordPress más básico posible. Solo hay dos archivos obligatorios:

vamos a generar style.css utilizando Tailwind index.phpEmpecemos con algo simple:

<!doctype html>
<html lang="en">
  <head>
    <?php wp_head(); ?>
    <link rel="stylesheet" href="https://css-tricks.com/adding-tailwind-css-to-wordpress-themes/<?php echo get_stylesheet_uri(); ?>" type="text/css" media="all" />
  </head>
  <body>
    <?php
    if ( have_posts() ) {
      while ( have_posts() ) {
        the_post();
        the_title( '<h1 class="entry-title">', '</h1>' );
        ?>
        <div class="entry-content">
          <?php the_content(); ?>
        </div>
        <?php
      }
    }
    ?>
  </body>
</html>

Hay muchas cosas que un tema de WordPress debería hacer que el código anterior no hace: cosas como paginación, miniaturas de publicaciones, hojas de estilo en cola en lugar de usar link elementos, etc., pero eso será suficiente para mostrar una publicación y probar que Tailwind funciona correctamente.

Desde el lado de Tailwind necesitamos tres archivos:

  • package.json
  • tailwind.config.js
  • Archivo de entrada Tailwind

Antes de continuar, lo necesitará npmSi no se siente cómodo trabajando con él, tenemos una guía para principiantes de npm, que es un buen lugar para comenzar.

porque no hay package.json aún así, crearemos un archivo JSON vacío en la misma carpeta con index.php ejecutando este comando en la terminal de nuestra elección:

echo {} > ./package.json

Con este archivo podemos instalar Tailwind:

npm install tailwindcss --save-dev

Y generar nuestro archivo de configuración de Tailwind:

npx tailwindcss init

En nuestro tailwind.config.js archivo, todo lo que tenemos que hacer es decirle a Tailwind que busque clases útiles en nuestros archivos PHP:

module.exports = {
  content: ["./**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Si se utiliza nuestro tema Compositornos gustaría ignorar vendor directorio agregando algo como "!**/vendor/**" para content Pero si todos sus archivos PHP son parte de su tema, ¡lo anterior funcionará!

Podemos nombrar nuestro archivo de entrada como queramos. Vamos a crear un archivo llamado tailwind.css y añádele esto:

/*!
Theme Name: WordPress + Tailwind
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

WordPress requiere el comentario anterior para reconocer el tema; el tres @tailwind las directivas agregan cada una de las capas de Tailwind.

¡Y eso es! Ahora podemos ejecutar el siguiente comando:

npx tailwindcss -i ./tailwind.css -o ./style.css --watch

Esto le dice a Tailwind CLI que genere el nuestro. style.css archivo usando tailwind.css como un archivo de entrada --watch la bandera se recuperará constantemente style.css archivo a medida que se agregan o eliminan clases auxiliares de cada archivo PHP en nuestro repositorio de proyectos.

Es tan simple como puede ser un tema de WordPress de Tailwind, pero es poco probable que sea algo que desee implementar en producción. Entonces, hablemos de algunos caminos hacia un tema ya preparado.

Agregar TailwindCSS a un tema existente

Hay dos razones por las que puede querer agregar Tailwind CSS a un tema existente que ya tiene su propio CSS estándar:

  • Para experimentar agregando componentes de Tailwind a un tema ya estilizado
  • Para transferir un tema de Vanilla CSS a Tailwind

Lo demostraremos instalando Tailwind en Twenty Twenty-One, el tema predeterminado de WordPress. (¿Por qué no Twenty Twenty-Two? El último tema predeterminado de WordPress está diseñado para demostrar la edición en todo el sitio y no es adecuado para la integración de Backwind).

Para comenzar, debe descargar e instalar el tema en su entorno de desarrollo, si no está instalado allí. Solo tenemos que seguir unos pocos pasos después de eso:

  • Navegue a la carpeta del tema en su terminal.
  • Porque Twenty Twenty-One ya tiene la suya package.json archivo, instale Tailwind sin crear uno nuevo:
npm install tailwindcss --save-dev
  • Agrega el tuyo tailwind.config.json expediente:
npx tailwindcss init
  • Actualiza tu tailwind.config.json archivo para tener el mismo aspecto que en la sección anterior.
  • Copie el Veinte Veintiuno existente style.css archivo a tailwind.css.

Ahora tenemos que sumar nuestros tres @tailwind directivas a tailwind.css Le sugiero que estructure su archivo tailwind.css de la siguiente manera:

/* The WordPress theme file header goes here. */

@tailwind base;

/* All of the existing CSS goes here. */

@tailwind components;
@tailwind utilities;

la colocación de base La capa inmediatamente después del encabezado del tema garantiza que WordPress continúe descubriendo su tema, al tiempo que garantiza que el restablecimiento de Tailwind CSS llegue al archivo lo antes posible.

Todos los CSS existentes siguen base capa, asegurándose de que estos estilos tengan prioridad sobre el reinicio.

Finalmente, en components y utilities las capas siguen para que puedan tener prioridad sobre todas las declaraciones CSS con la misma especificidad.

Y ahora, al igual que con nuestro tema mínimo, ejecutaremos el siguiente comando:

npx tailwindcss -i ./tailwind.css -o ./style.css --watch

Con tu nuevo style.css que ahora se genera cada vez que cambia un archivo PHP, debe verificar su tema revisado para detectar pequeñas diferencias en la representación del original. Se producen al restablecer el CSS de Tailwind, que restablece las cosas un poco más de lo que podrían esperar algunos temas. EN caso de Veintidós y uno, el único ajuste que hice fue agregar text-decoration-line: underline para a elemento.

Una vez que se resuelva este problema de representación, agreguemos Componente de banner de encabezado desde Interfaz de usuario de viento de colala biblioteca de componentes en la primera página de Tailwind. Copie el código del sitio web de Tailwind UI y péguelo justo después del enlace «Saltar al contenido» en header.php:

¡Bastante bien! Dado que ahora querremos usar clases auxiliares para reemplazar algunas de las clases existentes de mayor especificidad integradas en el tema, agregaremos una línea a tailwind.config.js expediente:

module.exports = {
  important: true,
  content: ["./**/*.php"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Esto marca todas las utilidades Tailwind CSS como !important para que puedan reemplazar las clases existentes con mayor especificidad. (Nunca pregunté important para true en producción, pero es casi seguro que lo habría hecho si estuviera en el proceso de convertir un sitio de Vanilla CSS a Tailwind).

con rapido no-underline clase añadida al enlace «Más información» y bg-transparent y border-0 añadido al botón de rechazar, ya estamos listos:

Muestra el componente Tailwind CSS en la parte frontal de un tema de WordPress, pero con botones y estilos de enlace más sofisticados.

Parece un poco impactante ver los componentes de la interfaz de usuario de Tailwind combinados en un tema predeterminado de WordPress, pero esta es una gran demostración de los componentes de Tailwind y su portabilidad inherente.

Empezando desde cero

Si crea un nuevo tema con Tailwind, su proceso se parecerá mucho al ejemplo mínimo anterior. En lugar de ejecutar la CLI de Tailwind directamente desde la línea de comandos, probablemente desee crear secuencias de comandos de compilación de producción y desarrollo de npm independientes y realizar un seguimiento de los cambios. También es posible que desee crear una versión separada específicamente para el editor de WordPress.

Si está buscando un punto de partida más allá del ejemplo mínimo anterior, pero no mucho más allá de crear sus propios estilos obstinados, he creado Generador de temas de WordPress optimizado para Tailwind inspirado por Énfasis (_s) después del tema canónico de WordPress. Llamado _tw, este es el inicio rápido que me gustaría tener cuando combiné Tailwind con WordPress por primera vez. Este sigue siendo el primer paso en todos los proyectos de mis clientes.

Si está listo para ir más allá de la estructura de un tema típico de WordPress y agregar plantillas de Laravel Blade a su kit de herramientas, sabio es una gran elección y tienen Guia de preparacion específicamente para que Tailwind te ayude a comenzar.


Independientemente de lo que decida para comenzar, le recomiendo que se tome un tiempo para aclimatarse a Tailwind CSS y diseñar documentos HTML con clases de ayuda: puede parecer extraño al principio, pero pronto descubrirá que acepta más trabajo de cliente que antes porque construyes sitios más rápido que antes, y espero que, como yo, te diviertas más.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba