I can't get any styling from tailwindcss to go on my MUI button. I am using babel and webpack. And the npm run dev script is "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>
You can simply change the following codes in your App.css and it will work.
from this
@tailwind components;
@tailwind utilities;
to this
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Rest of the codes remain same. Only the above needs to be changed and you're good to go. This usually happens in tailwind v3.
Hope this answer helps you.