Permudahkan TailwindCSS dengan TailwindBox

TailwindCSS berkuasa, tetapi sukar untuk dibaca. Menulis gaya bersyarat juga boleh menjadi kerumitan. Jadi saya memutuskan untuk mencipta perpustakaan yang ringan dan ringkas untuk menyelesaikan masalah ini.

TailwindBox

jnoncode / tailwindbox

Urus gaya TailwindCSS dengan mudah dengan struktur seperti objek yang ringkas

? Pemasangan

Pasang TailwindBox melalui npm atau benang:

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

? Penggunaan

Berikut ialah contoh pantas cara menggunakan 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;

• asas: Sentiasa gunakan gaya asas (p-4 bulat-lg bayang-md).
• gelap: Guna bg-gray-800 text-white hanya jika isDarkMode adalah benar.
• cahaya: Gunakan teks bg-putih-hitam hanya jika isDarkMode palsu.

? Ciri-ciri

• Struktur Seperti Objek: Tentukan gaya TailwindCSS dalam berasaskan objek…

Lihat di GitHub

TailwindBox menjadikan kod TailwindCSS anda lebih bersih dan lebih mudah untuk diurus. Berikut ialah contoh pantas cara menggunakan TailwindBox:

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

• asas: Sentiasa gunakan gaya asas (p-4 bulat-lg bayang-md).
• gelap: Guna bg-gray-800 text-white hanya jika isDarkMode adalah benar.
• cahaya: Gunakan teks bg-putih-hitam hanya jika isDarkMode palsu.

Ciri-ciri

• Struktur Seperti Objek: Tentukan gaya TailwindCSS dalam format berasaskan objek.
• Kelas Bersyarat: Gunakan kelas secara dinamik berdasarkan keadaan permohonan anda.
• Kebolehbacaan Dipertingkat: Permudahkan rentetan kelas yang panjang dan kompleks.
• Ringan: Pustaka minimum yang direka untuk pengguna TailwindCSS.

Ia akan menjadi bantuan yang hebat apabila anda membangunkan dengan TailwindCSS. Cubalah, dan jangan ragu untuk berkongsi maklum balas anda pada bila-bila masa!

Atas ialah kandungan terperinci Permudahkan TailwindCSS dengan TailwindBox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!