0
318
ViewsTailwindcss not working with NextJS 12. Experimental features
When NextJS 12 released , i taught to build a project with tailwind.
my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.0.1",
"react": "^18.0.0-alpha-9c8161ba8-20211028",
"react-dom": "^18.0.0-alpha-9c8161ba8-20211028"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"eslint": "7",
"eslint-config-next": "12.0.1",
"postcss": "^8.3.11",
"tailwindcss": "^2.2.19"
}
}
next.config.js file
module.exports = {
swcMinify: true,
reactStrictMode: true,
experimental: {
concurrentFeatures: true,
serverComponents: true,
},
};
and as per nextjs documentaion we have to update our _document.js file
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
im getting this wierd error
my global.css file
@tailwind base;
@tailwind components;
@tailwind utilities;
BUT , if i remove the experimental features it works just file
like so
module.exports = {
swcMinify: true,
reactStrictMode: true,
};
Strange, BUT it works after i build
·
Juan Pablo Isaza
1 answers
Answer question0
I followed the instructions on the offical page exactly.
- it did not work in dev mode (next dev)
- it did work, however in prod mode (next build && next start)
i added swcMinify: true to my next.config.js, now it works in both modes.
So my full next cofig is now
/** @type {import('next').NextConfig} */
const nextConfig = {
swcMinify: true,
reactStrictMode: true,
};
module.exports = nextConfig;
·
Juan Pablo Isaza
Report
Answer question