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开发过程。尝试一下，看看它如何帮助您节省时间和精力来构建美丽且功能性的接口。如果您有任何疑问或反馈，请随时与我们联系。愉快的编码！