Vereinfachen Sie TailwindCSS mit TailwindBox

TailwindCSS ist leistungsstark, kann jedoch schwer zu lesen sein. Auch das Schreiben bedingter Stile kann mühsam sein. Deshalb habe ich beschlossen, eine leichte und einfache Bibliothek zu erstellen, um dieses Problem zu lösen.

RückenwindBox

jnoncode / Rückenwindbox

Verwalten Sie TailwindCSS-Stile ganz einfach mit einfachen objektähnlichen Strukturen

? Installation

TailwindBox über npm oder Yarn installieren:

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

? Verwendung

Hier ist ein kurzes Beispiel für die Verwendung von 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;

• Basis: Wendet immer die Basisstile an (p-4 abgerundet-lg Schatten-md).
• dunkel: Wendet bg-gray-800 text-white nur an, wenn isDarkMode wahr ist.
• Licht: Wendet bg-white text-black nur an, wenn isDarkMode false ist.

? Funktionen

• Objektähnliche Struktur: Definieren Sie TailwindCSS-Stile in einer objektbasierten…

Auf GitHub ansehen

TailwindBox macht Ihren TailwindCSS-Code sauberer und einfacher zu verwalten. Hier ist ein kurzes Beispiel für die Verwendung von TailwindBox:

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

• Basis: Wendet immer die Basisstile an (p-4 abgerundet-lg Schatten-md).
• dunkel: Wendet bg-gray-800 text-white nur an, wenn isDarkMode wahr ist.
• Licht: Wendet bg-white text-black nur an, wenn isDarkMode false ist.

Merkmale

• Objektähnliche Struktur: Definieren Sie TailwindCSS-Stile in einem objektbasierten Format.
• Bedingte Klassen: Wenden Sie Klassen dynamisch basierend auf dem Status Ihrer Anwendung an.
• Verbesserte Lesbarkeit: Vereinfachen Sie lange und komplexe Klassenzeichenfolgen.
• Leichtgewicht: Eine minimale Bibliothek, die für TailwindCSS-Benutzer entwickelt wurde.

Es wird eine große Hilfe sein, wenn Sie mit TailwindCSS entwickeln. Probieren Sie es aus und teilen Sie uns jederzeit Ihr Feedback mit!

Das obige ist der detaillierte Inhalt vonVereinfachen Sie TailwindCSS mit TailwindBox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!