MUI 上没有来自 tailwindcss 的样式

Question

我无法从 tailwindcss 获取任何样式以继续我的 MUI 按钮。我正在使用 babel 和 webpack。 npm 运行开发脚本是“webpack --mode development --watch”

tailwind.css

module.exports = {
  content: ["./src/**/*.{js, jsx, ts, tsx}", "./templates/**/*.{html}"],
  important: '#root',
  theme: {
    extend: {},
  },
  plugins: [],
}

App.css

@tailwind components;
@tailwind utilities;

App.js

import "./App.css"
import { StyledEngineProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

// ...
<StyledEngineProvider injectFirst>
  <CssBaseline />
  <Button>Click me</Button>
</StyledEngineProvider>

Answer 1

您只需更改 App.css 中的以下代码即可。

由此

@tailwind components;

@tailwind utilities;

至此

@import "tailwindcss/components";

@import "tailwindcss/utilities";

其余代码保持不变。只需更改以上内容即可。这通常发生在 tailwind v3 中。

希望这个回答对您有所帮助。

MUI 上没有来自 tailwindcss 的样式

No styling from tailwindcss on MUI

javascript

css

reactjs

material-ui

tailwind-css