Comment configurer le tri automatique des classes Tailwind CSS avec plus joli dans les projets nouveaux et existants

Introduction

Tailwind CSS est un framework CSS utilitaire populaire qui fournit des classes utilitaires de bas niveau pour appliquer des styles directement dans le balisage, conduisant à des cycles de développement plus rapides.

Prettier, en revanche, est un formateur de code largement utilisé qui garantit que votre code est formaté de manière cohérente en l'analysant et en le réimprimant avec ses propres règles. Cela permet de maintenir un style de code uniforme dans l'ensemble du projet, rendant la base de code plus propre et plus facile à lire.

Un défi courant lors de l'utilisation de Tailwind CSS est la gestion de l'ordre des classes utilitaires, d'autant plus que la complexité de vos styles et de votre HTML augmente. Le tri manuel de ces classes peut être fastidieux et sujet aux erreurs. C'est là qu'intervient le tri automatique des classes. En tirant parti d'outils comme Prettier ainsi que de plugins tels que prettier-plugin-tailwindcss, nous pouvons automatiser le tri des classes CSS Tailwind, garantissant un ordre cohérent et améliorant la lisibilité et la maintenabilité des classes.

Le but de cet article est de vous guider tout au long du processus de configuration du tri automatique des classes Tailwind CSS avec Prettier dans les projets nouveaux et existants. Que vous démarriez un nouveau projet ou que vous intégriez un projet en cours, ce guide complet vous fournira des instructions étape par étape.

Table des matières

• Configuration de Tailwind CSS et Prettier dans un nouveau projet
  • Initialisation du projet et installation de Tailwind CSS
  • Installer et configurer Prettier
• Configuration de prettier-plugin-tailwindcss dans un projet CSS Tailwind existant
• Conclusion

Configuration de Tailwind CSS et Prettier dans un nouveau projet

Avant de commencer, assurez-vous que les éléments suivants sont installés :

• Node.js
• Un gestionnaire de paquets (nous utiliserons bun pour ce projet, mais vous pouvez utiliser npm, fil ou pnpm si vous préférez)
• Un éditeur de code (par exemple, VS Code)

Initialisation du projet et installation de Tailwind CSS

Commencez par créer un nouveau projet. Les étapes spécifiques peuvent varier en fonction de votre framework ou de votre configuration préféré. Reportez-vous au Guide du framework d'installation Tailwind CSS pour des instructions détaillées. Si vous avez déjà terminé les étapes d'installation de Tailwind CSS, vous pouvez passer à la section Configuration de plus joli-plugin-tailwindcss dans un projet CSS Tailwind existant. Voici comment procéder avec Vite :

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

Maintenant, installons et configurons Tailwind CSS

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

Vous devriez voir un fichier de configuration CSS Tailwind : tailwind.config.js, copiez-y le contenu suivant.

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

Ajoutez les directives Tailwind suivantes en haut de votre fichier CSS (par exemple, src/index.css) :

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

Installer et configurer plus joli

bun install -D prettier prettier-plugin-tailwindcss

Créez un fichier de configuration plus joli à la racine de votre projet et ajoutez le plugin plus joli-plugin-tailwindcss au fichier de configuration, nous utiliserions .prettierrc, vous pouvez consulter d'autres types de fichiers de configuration plus jolis acceptables ici

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

Testons maintenant la configuration, modifions le fichier src/App.tsx et sauvegardons-le.

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

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

  return (
    <>
      <div className="card">
        <button
          className="border-2 border-teal-700 hover:border-white bg-white hover:bg-teal-700 text-slate-800 hover:text-white transition-colors duration-300 custom-btn"
          onClick={() => setCount((count) => count + 1)}
        >
          Count is {count}
        </button>
      </div>
    </>
  );
};

export default App;

Résultat :

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

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

  return (
    <>
      <div className="card">
        <button
          className="custom-btn border-2 border-teal-700 bg-white text-slate-800 transition-colors duration-300 hover:border-white hover:bg-teal-700 hover:text-white"
          onClick={() => setCount((count) => count + 1)}
        >
          Count is {count}
        </button>
      </div>
    </>
  );
};

export default App;

Configuration de Prettier-plugin-tailwindcss dans un projet CSS Tailwind existant

Si votre projet a déjà configuré Prettier, l'intégration du plugin prettier-plugin-tailwindcss est simple. Il vous suffira d'installer le plugin et de le configurer. Si Prettier n'est pas encore installé, vous devrez le configurer avec le plugin.

Pour les projets avec une configuration plus jolie existante, exécutez :

bun add -D prettier-plugin-tailwindcss

Pour les projets sans configuration plus jolie, exécutez :

bun add -D prettier prettier-plugin-tailwindcss

Ajoutez le plugin à votre configuration Prettier existante. S'il n'existe pas de configuration Prettier existante, créez un fichier .prettierrc à la racine de votre projet. Ajoutez ensuite ce qui suit :

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

Assurez-vous que Prettier fonctionne correctement en apportant des modifications à un fichier avec les classes CSS Tailwind. Enregistrez le fichier et vérifiez si les classes CSS Tailwind sont triées automatiquement.

Conclusion

L'intégration de prettier-plugin-tailwindcss dans les projets CSS Tailwind nouveaux et existants améliore votre flux de travail de développement en garantissant un tri de classes cohérent et organisé. Pour les nouveaux projets, vous pouvez configurer Prettier et le plugin simultanément pour rationaliser votre configuration initiale. Pour les projets existants, ajoutez simplement le plugin à votre configuration Prettier existante ou installez à la fois Prettier et le plugin si Prettier n'est pas encore configuré.

Pour des options de configuration supplémentaires telles que le tri des classes dans des attributs non standard, visitez la documentation prettier-plugin-tailwindcss.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!