Failed to Integrate TailwindCSS with NextJS Because of postcss.config.js

Question

I have successfully migrated my project from Vite to NextJS, following the official instructions.
When I tried to integrate tailwindcss next, the error occurred as the following picture after doing everything the official document said.

---

After tries and errors, I have found that the error comes from postcss.config.js, but I have no clues on how to solve the issue.

The error is gone as long as I don't have the postcss.config.js file, but I still can't get tailwind css to work without that config file.

I've tried to run the dev server locally and with docker, both of which get me no luck. I cannot find any issue closely related to mine.
Please help me with this one.

These are the code I have related to the issue.

1. postcss.config.js

   export default {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   };
   

2. tsconfig.json

   {
     "compilerOptions": {
       "target": "ES2020",
       "useDefineForClassFields": true,
       "lib": ["ES2020", "DOM", "DOM.Iterable"],
       "module": "ESNext",
       "skipLibCheck": true,
       "allowJs": true,
       "forceConsistentCasingInFileNames": true,
       "incremental": true,
       "paths": { "@/*": ["/*"] },
   
       /* Bundler mode */
       "moduleResolution": "bundler",
       "allowImportingTsExtensions": true,
       "resolveJsonModule": true,
       "isolatedModules": true,
       "esModuleInterop": true,
       "noEmit": true,
       "jsx": "preserve",
   
       /* Linting */
       "strict": true,
       "noUnusedLocals": true,
       "noUnusedParameters": true,
       "noFallthroughCasesInSwitch": true,
       "plugins": [{ "name": "next" }]
     },
     "include": ["./dist/types/**/*.ts", "./next-env.d.ts"],
     "exclude": ["./node_modules/"]
   }
   

3. next.config.mjs

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     output: "export", // Outputs a Single-Page Application (SPA)
     distDir: "./dist", // Changes the build output directory to `./dist/`
   };
   
   export default nextConfig;
   

Answer 1

Tailwind CSS is a plugin for PostCSS. So, you'll have to install postcss package and set up the configuration with postcss.config.js file. When you're working on a Next.js project and would like to use Tailwind CSS in it, tailwindcss, postcss, and autoprefixer is a typical combination of libraries that you'll have to install.

Based upon the context and error message that you shared, here are some considerations that you may have to check in:

1. Install postcss and autoprefixer packages as dev dependencies:

   npm install postcss --save-dev
   npm install autoprefixer --save-dev
   

2. Set up postcss.config.js file (I assume you already set up tailwind.config.js file too):

   module.exports = {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   };
   

3. The error message also indicates that there is a compatibility issue with using require() to your postcss.config.js in a context where ES Modules (ESM) are expected.

   So, consider converting your postcss.config.js to ESM syntax, and rename your postcss.config.js file to postcss.config.mjs.

   If all these steps don't resolve your issue, try applying the same step to your tailwind.config.js file too.

   The updated postcss.config.mjs file would look like:

   export default {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   };