tailwind material 3

Bahan Tailwind 3

Bahan Tailwind 3 adalah perpustakaan yang menyediakan komponen UI yang siap digunakan untuk pengguna CSS Tailwind. Ini mencakup berbagai komponen yang dapat disesuaikan seperti tombol, kartu, dan formulir, serta utilitas dan pembantu yang berguna. Memasang Bahan Tailwind 3 semudah menjalankan yang berikut ini

Perintah di terminal Anda:

 npm i tailwind-materilal-3

Perpustakaan dipelihara secara aktif dan diperbarui, memastikan bahwa Anda selalu memiliki akses ke komponen UI terbaru dan terhebat. Cobalah dan lihat bagaimana hal itu dapat membantu merampingkan proses pengembangan UI Anda!

Cara menggunakan

Untuk menggunakan Bahan Tailwind 3, pertama -tama pastikan bahwa Anda memiliki CSS tailwind yang dipasang di proyek Anda. Kemudian, cukup impor komponen yang diinginkan dari perpustakaan dan gunakan dalam kode HTML Anda.

Silakan ikuti instruksi

Langkah 1

Instal tailwindcss melalui NPM, dan buat file tailwind.config.js Anda.

npm install -D tailwindcss
npx tailwindcss init

Langkah 2

Pasang tailwind-material-3 melalui NPM.

npm i tailwind-material-3 tailwind-material-colors

Langkah 3

Tambahkan jalur ke semua file template Anda, warna, dan konfigurasi lainnya di file tailwind.config.js Anda.

 const { default : useMD3 } = require ( 'tailwind-material-3' ) ;

module . exports = useMD3 ( {
  content : [ "./src/**/*.{html,js}" ] ,
  theme : {
    colors : {
         primary : "#9cd67d" ,
         blue : "#8116f3" ,
      } ,
    extend : { } ,
  } ,
  plugins : [ ] ,
} )

Langkah 4

Tambahkan arahan @tailwind untuk masing -masing lapisan Tailwind ke file CSS utama Anda.

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

Langkah 5

Mulailah menggunakan komponen dalam kode HTML Anda!

 < body >
  < div class =" p-4 " >
        < button class =" filled-btn " > filled-btn </ button >      
        < button class =" filled-btn " disabled > disabled filled-btn </ button >
        < button class =" filled-tonal-btn " > filled-tonal-btn </ button >
        < button class =" outlined-btn " > outlined-btn </ button >
  </ div >
</ body >

Itu saja! Sekarang Anda tahu cara menggunakan Bahan Taman 3 untuk merampingkan proses pengembangan UI Anda. Cobalah dan lihat bagaimana hal itu dapat membantu Anda menghemat waktu dan upaya dalam membangun antarmuka yang indah dan fungsional. Jika Anda memiliki pertanyaan atau umpan balik, jangan ragu untuk menghubungi kami. Happy Coding!