Simplifiez TailwindCSS avec TailwindBox

TailwindCSS est puissant, mais il peut être difficile à lire. L'écriture de styles conditionnels peut également s'avérer fastidieuse. J'ai donc décidé de créer une bibliothèque légère et simple pour résoudre ce problème.

Boîte à vent arrière

jnoncode / boîte à vent arrière

Gérez facilement les styles TailwindCSS avec des structures simples de type objet

? Installation

Installez TailwindBox via npm ou fil :

npm install tailwindbox
<span># or</span>
yarn add tailwindbox

? Utilisation

Voici un exemple rapide d'utilisation de TailwindBox :

import { tw } from "tailwindbox";

function App() {
  const isDarkMode = true;

  const styles = tw({
    base: "p-4 rounded-lg shadow-md",
    dark: { if: isDarkMode, classes: "bg-gray-800 text-white" },
    light: { if: !isDarkMode, classes: "bg-white text-black" },
  });

  return <div className={styles}>Hello, TailwindBox!</div>;
}

export default App;

• base : applique toujours les styles de base (p-4 arrondi-lg shadow-md).
• dark : applique bg-gray-800 text-white uniquement si isDarkMode est vrai.
• light : applique bg-white text-black uniquement si isDarkMode est false.

? Caractéristiques

• Structure de type objet : définissez les styles TailwindCSS dans une structure basée sur les objets…

Voir sur GitHub

TailwindBox rend votre code TailwindCSS plus propre et plus facile à gérer. Voici un exemple rapide de la façon d'utiliser TailwindBox :

npm install tailwindbox
<span># or</span>
yarn add tailwindbox

• base : applique toujours les styles de base (p-4 arrondi-lg shadow-md).
• dark : applique bg-gray-800 text-white uniquement si isDarkMode est vrai.
• light : applique bg-white text-black uniquement si isDarkMode est false.

Caractéristiques

• Structure de type objet : définissez les styles TailwindCSS dans un format basé sur les objets.
• Classes conditionnelles : appliquez des classes de manière dynamique en fonction de l'état de votre application.
• Lisibilité améliorée : simplifiez les chaînes de classe longues et complexes.
• Lightweight : Une bibliothèque minimale conçue pour les utilisateurs de TailwindCSS.

Ce sera d'une grande aide lorsque vous développerez avec TailwindCSS. Essayez-le et n'hésitez pas à partager vos commentaires à tout moment !

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!