在react项目中使用material ui和Tailwind css_如何在React + Material-UI项目中使用CSS？_如何使用Flexbox和Material UI在列中添加项目 - 腾讯云开发者社区

在React项目中同时使用Material-UI和Tailwind CSS是完全可行的，尽管这两者在样式的实现方式上有所不同。Material-UI是一个基于React的UI框架，提供了一套丰富的预定义组件，而Tailwind CSS是一个功能类优先的CSS框架，允许你通过组合类名来快速构建自定义设计。下面是如何在同一个项目中整合这两个库的步骤：

步骤 1: 创建React项目

如果你还没有创建React项目，可以使用Create React App来快速开始：

npx create-react-app my-app
cd my-app

步骤 2: 安装Material-UI

安装Material-UI核心库和图标库：

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

步骤 3: 安装Tailwind CSS

接下来，安装Tailwind CSS：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

这将创建一个tailwind.config.js和一个postcss.config.js文件。

步骤 4: 配置Tailwind CSS

在tailwind.config.js文件中，配置你的路径以确保Tailwind可以正确地扫描你的React组件：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

步骤 5: 引入Tailwind到CSS

在你的项目中创建一个CSS文件（例如src/index.css），并添加Tailwind的指令：

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

然后，在src/index.js中引入这个CSS文件：

import './index.css';

步骤 6: 使用Material-UI和Tailwind CSS

现在你可以在组件中同时使用Material-UI和Tailwind CSS了。例如：

import React from 'react';
import Button from '@mui/material/Button';

function App() {
  return (
    <div className="App p-5">
      <h1 className="text-2xl font-bold mb-2">Welcome to React</h1>
      <Button variant="contained" color="primary">
        Material-UI Button
      </Button>
      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Tailwind Button
      </button>
    </div>
  );
}

export default App;