After building a Next.js application and following the instructions in the documentation to integrate TailwindCSS, I encountered a problem. Despite completing the integration process successfully, the web page did not display any of the expected TailwindCSS styles.
I have identified the files that could be causing this issue and would appreciate it if someone could help me pinpoint where I went wrong.
Index.js file
return (
<div className="flex justify-center">
<div className="px-4" style={{maxWidth: "1600px"}}>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2> Test
</div>
</div>
</div>
)
postcss.config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;