MaterialUI + tailwindcss in nextjs
Answered
gref9730 posted this in #help-forum
gref9730OP
I made a project where I have one site with material Table and I changed some of the css with tailwindcss classNames... but on one page the className is being rendered after the Material Table's css and therefore like ignored .. eventhough the page is almost same like the previous which is working just fine
This is the page where table is working with tailwind
And the second is the one thats not working
I got response that I should use just material or tailwindcss but I read on some posts that it should be able to work together any ideas?
This is the page where table is working with tailwind
And the second is the one thats not working
I got response that I should use just material or tailwindcss but I read on some posts that it should be able to work together any ideas?
Answered by American black bear
You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)
Post created!
(if you don't see the option, try refreshing Discord with Ctrl + R)
Post created!
13 Replies
American black bear
hey, does this only break in developpent when changing site, or does it also not work when you make a build and deploy it?
and how are you importing the tailwind styles? is it with
and how are you importing the tailwind styles? is it with
@tailwind xx in the globals.css?gref9730OP
I havent tried to build and deploy yet, this is tailwind.config.js
module.exports = {
mode: "jit",
darkMode: false,
plugins: [],
purge: [
"./pages//*.{js,ts,jsx,tsx,mdx}",
"./components//.{js,ts,jsx,tsx,mdx}",
"./app/**/.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
variants: {
extend: {},
},
};
mode: "jit",
darkMode: false,
plugins: [],
purge: [
"./pages//*.{js,ts,jsx,tsx,mdx}",
"./components//.{js,ts,jsx,tsx,mdx}",
"./app/**/.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
variants: {
extend: {},
},
};
globals.css
&913086567042674719 base;
&913086567042674719 components;
&913086567042674719 utilities;
.progress {
position: relative;
}
.progress::after {
content: '';
position: absolute;
top: 0;
left: 60%;
width: 1px;
height: 100%;
background-color: #000;
background-image: repeating-linear-gradient(
transparent,
transparent 2px,
#000 2px,
#000 4px
);
}
&913086567042674719 components;
&913086567042674719 utilities;
.progress {
position: relative;
}
.progress::after {
content: '';
position: absolute;
top: 0;
left: 60%;
width: 1px;
height: 100%;
background-color: #000;
background-image: repeating-linear-gradient(
transparent,
transparent 2px,
#000 2px,
#000 4px
);
}
and in very first layout.js in right in app folder I have
import './globals.css'
American black bear
does it fix the issue on
second site if you reload the page?gref9730OP
nop
even ctlr+f5
American black bear
and did you follow the recommended settings here?
https://mui.com/material-ui/guides/interoperability/#tailwind-css
https://mui.com/material-ui/guides/interoperability/#tailwind-css
gref9730OP
Thanks fix it (y)
American black bear
You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)
Post created!
(if you don't see the option, try refreshing Discord with Ctrl + R)
Post created!
Answer