Introducción

Tailwind CSS es un popular marco CSS de utilidad que proporciona clases de utilidad de bajo nivel para aplicar estilos directamente en el marcado, lo que lleva a ciclos de desarrollo más rápidos.

Prettier, por otro lado, es un formateador de código ampliamente utilizado que garantiza que su código tenga un formato consistente al analizarlo y reimprimirlo con sus propias reglas. Esto ayuda a mantener un estilo de código uniforme en todo el proyecto, lo que hace que el código base sea más limpio y más fácil de leer.

Un desafío común al usar Tailwind CSS es administrar el orden de las clases de utilidades, especialmente a medida que crece la complejidad de sus estilos y HTML. Ordenar estas clases manualmente puede resultar tedioso y propenso a errores. Aquí es donde entra en juego la clasificación automática de clases. Al aprovechar herramientas como Prettier junto con complementos como prettier-plugin-tailwindcss, podemos automatizar la clasificación de las clases Tailwind CSS, garantizando un orden consistente y mejorando la legibilidad y mantenibilidad de las clases.

El propósito de este artículo es guiarlo a través del proceso de configuración de la clasificación automática de clases de Tailwind CSS con Prettier tanto en proyectos nuevos como existentes. Ya sea que esté iniciando un nuevo proyecto o integrándose a uno en curso, esta guía completa le proporcionará instrucciones paso a paso.

Tabla de contenido

• Configurar Tailwind CSS y Prettier en un nuevo proyecto
  • Iniciando el proyecto e instalando Tailwind CSS
  • Instalar y configurar Prettier
• Configuración de prettier-plugin-tailwindcss en un proyecto CSS Tailwind existente
• Conclusión

Configurar Tailwind CSS y Prettier en un nuevo proyecto

Antes de comenzar, asegúrese de tener instalado lo siguiente:

• Nodo.js
• Un administrador de paquetes (usaremos bun para este proyecto, pero puedes usar npm, Yarn o pnpm si lo prefieres)
• Un editor de código (por ejemplo, VS Code)

Inicializando el proyecto e instalando Tailwind CSS

Empiece por crear un nuevo proyecto. Los pasos específicos pueden variar según su marco o configuración preferida. Consulte la Guía del marco de instalación de Tailwind CSS para obtener instrucciones detalladas. Si ya ha completado los pasos de instalación de Tailwind CSS, puede continuar con la sección Configuración de prettier-plugin-tailwindcss en un proyecto existente de Tailwind CSS. Aquí se explica cómo hacerlo usando Vite:

bun create vite my-app --template react-ts
cd my-app
bun install

Ahora instalemos y configuremos Tailwind CSS

bun install -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

Deberías ver un archivo de configuración CSS de Tailwind: tailwind.config.js, copia el siguiente contenido en él.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Agregue las siguientes directivas Tailwind en la parte superior de su archivo CSS (por ejemplo, src/index.css):

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

Instalar y configurar más bonito

bun install -D prettier prettier-plugin-tailwindcss

Cree un archivo de configuración más bonito en la raíz de su proyecto y agregue el complemento prettier-plugin-tailwindcss al archivo de configuración, usaríamos .prettierrc, puede consultar otros tipos de archivos de configuración más bonitos aceptables aquí

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Ahora probemos la configuración, modifiquemos el archivo src/App.tsx y guárdelo.

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

Resultado:

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

Configurar prettier-plugin-tailwindcss en un proyecto CSS Tailwind existente

Si su proyecto ya tiene Prettier configurado, integrar el complemento prettier-plugin-tailwindcss es sencillo. Sólo necesitarías instalar el complemento y configurarlo. Si Prettier aún no está instalado, deberás configurarlo junto con el complemento.

Para proyectos con una configuración más bonita existente, ejecute:

bun add -D prettier-plugin-tailwindcss

Para proyectos que no tengan una configuración más bonita, ejecute:

bun add -D prettier prettier-plugin-tailwindcss

Agregue el complemento a su configuración Prettier existente. Si no existe una configuración de Prettier, cree un archivo .prettierrc en la raíz de su proyecto. Luego agregue lo siguiente:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Asegúrese de que Prettier esté funcionando correctamente realizando cambios en un archivo con clases CSS de Tailwind. Guarde el archivo y compruebe si las clases CSS de Tailwind se ordenan automáticamente.

Conclusión

La integración de prettier-plugin-tailwindcss en proyectos Tailwind CSS nuevos y existentes mejora su flujo de trabajo de desarrollo al garantizar una clasificación de clases consistente y organizada. Para proyectos nuevos, puede configurar Prettier y el complemento simultáneamente para optimizar su configuración inicial. Para proyectos existentes, simplemente agregue el complemento a su configuración Prettier existente o instale Prettier y el complemento si Prettier aún no está configurado.

Para opciones de configuración adicionales, como ordenar clases en atributos no estándar, visite la documentación de prettier-plugin-tailwindcss.