tw classed

TW berkelas

Monorepo dari Proyek TW TW. Terdiri dari paket inti dan reaksi.

Dokumentasi lengkap

Bereaksi

Paket React adalah pembungkus di sekitar paket inti yang menyediakan cara yang mudah untuk membuat komponen yang diklasifikasikan. Lihat Dokumen Bereaksi

 // Button.tsx
import { classed } from "@tw-classed/react" ;

const Button = classed . button ( "px-4 py-2" , {
  variants : {
    color : {
      primary : "bg-blue-500 text-white" ,
      secondary : "bg-gray-500 text-white" ,
    } ,
  } ,
} ) ;

// In your App

const App = ( ) => {
  return (
    < >
      < Button color = "primary" > Primary </ Button >
      < Button color = "secondary" > Secondary </ Button >
    </ >
  ) ;
} ; 

Inti

Paket inti adalah perpustakaan yang menyediakan serangkaian fungsi untuk membantu Anda membangun komponen kelas Anda sendiri.

Lihat Dokumen Inti

 import { classed } from "@tw-classed/core" ;

const button = classed ( "px-4 py-2" , {
  variants : {
    color : {
      primary : "bg-blue-500 text-white" ,
      secondary : "bg-gray-500 text-white" ,
    } ,
  } ,
} ) ;

// In your template
const Button = document . createElement ( "button" ) ;
Button . className = button ( { color : "primary" } ) ;

// Or with a framework (Like lit-html)
const Button = ( ) => html ` < button class =" ${ button ( { color : "primary" } ) } " /> ` ; 

Lisensi

Mit

Komunitas Perselisihan