Tailwindcss not working with NextJS 12. Experimental features

Question

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

`concurrentFeatures` is currently broken. The team is investigating the issues. Wait for the next patch release. — brc-dd, Oct 29 '21 at 14:39
ok so , i saw the error and realised anchorElement was null and ad i have added **id="__next_css__DO_NOT_USE__"** on to body and it works, this could be a temporary fix — Abdul Kàbéèr, Oct 29 '21 at 14:44
Ideally it should work without a custom document, but due to some issues in next-middleware-ssr-loader, one needs to create a custom document. Also can you check if the error is still occurring if you copy paste the code given here in your _document: https://nextjs.org/docs/advanced-features/custom-document — brc-dd, Oct 29 '21 at 14:51

score 3 · Answer 1 · answered Jan 27 '22 at 15:58

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;

Tailwindcss not working with NextJS 12. Experimental features

1 Answers1