Material Tailwind 是一个组件库，它将 Google Material Design 的设计原则与 Tailwind CSS 的强大功能和灵活性相结合。

它提供了一系列 React 组件，这些组件既具有视觉吸引力又功能强大。Material Tailwind 涵盖了按钮、卡片、导航和对话框等基本组件，以及数据表和自动完成输入等高级组件。

此库非常适合希望使用 React 和 Tailwind CSS 创建受 Material Design 启发的现代应用程序的开发人员。

如何使用 Material Tailwind：

首先，启动一个 React 项目并安装 Tailwind。

现在，安装 Material Tailwind：

npm i @material-tailwind/react

安装后，您必须使用 withMT（） 包装 Tailwind CSS configurations（），如下所示：@material-tailwind/reacttailwind.config.js

const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

现在，使用 src/main 中的 Theme Provider 包装整个应用程序，如下所示：@material-tailwind/react

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

import { ThemeProvider } from '@material-tailwind/react';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

最后，在 React 应用程序中导入并使用所需的 Material Tailwind 组件。下面是一个 Button 组件的示例：

import { Button } from '@material-tailwind/react';

export default function Example() {
  return <Button>Button</Button>;
}