tailwind material 3

尾風材料3

Tailwind Material 3是一個庫，可為Tailwind CSS用戶提供現成的UI組件。它包括一系列可自定義的組件，例如按鈕，卡片和表格，以及有用的實用程序和助手。安裝尾風材料3與運行以下操作一樣容易

在您的終端中的命令：

 npm i tailwind-materilal-3

該庫是積極維護和更新的，以確保您始終可以訪問最新，最出色的UI組件。嘗試一下，看看它如何幫助簡化您的UI開發過程！

如何使用

要使用尾風材料3，首先要確保您的項目中安裝了尾風CSS。然後，只需從庫中導入所需的組件，然後在您的HTML代碼中使用它們。

請按照說明

步驟1

通過NPM安裝tailwindcss ，然後創建您的tailwind.config.js文件。

npm install -D tailwindcss
npx tailwindcss init

步驟2

通過NPM安裝tailwind-material-3 。

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的每層層中的每個層。

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

就是這樣！現在，您知道如何使用尾風材料3來簡化您的UI開發過程。嘗試一下，看看它如何幫助您節省時間和精力來構建美麗且功能性的接口。如果您有任何疑問或反饋，請隨時與我們聯繫。愉快的編碼！