tailwind material 3

วัสดุ Tailwind 3

Tailwind Material 3 เป็นไลบรารีที่มีส่วนประกอบ UI พร้อมใช้งานสำหรับผู้ใช้ Tailwind CSS มันมีช่วงของส่วนประกอบที่ปรับแต่งได้เช่นปุ่มการ์ดและรูปแบบรวมถึงยูทิลิตี้ที่มีประโยชน์และผู้ช่วยเหลือ การติดตั้งวัสดุ Tailwind 3 นั้นง่ายเหมือนการใช้งานต่อไปนี้

คำสั่งในเทอร์มินัลของคุณ:

 npm i tailwind-materilal-3

ห้องสมุดได้รับการดูแลและอัปเดตอย่างแข็งขันเพื่อให้แน่ใจว่าคุณสามารถเข้าถึงส่วนประกอบ UI ล่าสุดและยิ่งใหญ่ที่สุดได้เสมอ ลองดูสิว่าจะช่วยปรับปรุงกระบวนการพัฒนา UI ของคุณได้อย่างไร!

วิธีใช้

หากต้องการใช้วัสดุ Tailwind 3 ก่อนอื่นให้แน่ใจว่าคุณได้ติดตั้ง Tailwind CS ในโครงการของคุณ จากนั้นเพียงนำเข้าส่วนประกอบที่ต้องการจากไลบรารีและใช้ในรหัส HTML ของคุณ

โปรดทำตามคำแนะนำ

ขั้นตอนที่ 1

ติดตั้ง tailwindcss ผ่าน NPM และสร้างไฟล์ tailwind.config.js ของคุณ

npm install -D tailwindcss
npx tailwindcss init

ขั้นตอนที่ 2

ติดตั้ง tailwind-material-3 ผ่าน NPM

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

ขั้นตอนที่ 3

เพิ่มพา ธ ไปยังไฟล์เทมเพลตสีและการกำหนดค่าอื่น ๆ ทั้งหมดในไฟล์ tailwind.config.js ของคุณ

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

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

ขั้นตอนที่ 4

เพิ่มคำสั่ง @tailwind สำหรับแต่ละเลเยอร์ของ Tailwind ลงในไฟล์ CSS หลักของคุณ

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

ขั้นตอนที่ 5

เริ่มใช้ส่วนประกอบในรหัส HTML ของคุณ!

 < 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 >

แค่ไหน! ตอนนี้คุณรู้วิธีใช้วัสดุ Tailwind 3 เพื่อปรับปรุงกระบวนการพัฒนา UI ของคุณ ลองดูสิว่าจะช่วยให้คุณประหยัดเวลาและความพยายามในการสร้างอินเทอร์เฟซที่สวยงามและใช้งานได้อย่างไร หากคุณมีคำถามหรือข้อเสนอแนะใด ๆ อย่าลังเลที่จะติดต่อเรา การเข้ารหัสมีความสุข!