[Bug]: PostCSS error in @modern-js/plugin-tailwindcss

[harihar-nautiyal]

Version

System:
    OS: Linux 6.13 Fedora Linux 41 (Workstation Edition)
    CPU: (48) x64 AMD Ryzen Threadripper PRO 7965WX
    Memory: 20.66 GB / 27.29 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Browsers:
    Chrome: canary
  npmPackages:
    @modern-js/app-tools: 2.65.3 => 2.65.3 
    @modern-js/plugin-tailwindcss: ^2.65.3 => 2.65.3 
    @modern-js/runtime: 2.65.3 => 2.65.3 
    @modern-js/tsconfig: 2.65.3 => 2.65.3

Details

I recently initialized my first Modern.js app and wanted to install Tailwind CSS. I found the documentation for installing Tailwind CSS in Modern.js here. I followed the instructions correctly, but when I started the app, I encountered a PostCSS error.

> [email protected] dev
> modern dev

  Modern.js Framework v2.65.3

error   Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
    at Re (/home/hariharnautiyal/tests/m-tail/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.js:33:1723)
    at postcss (/home/hariharnautiyal/tests/m-tail/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@modern-js/plugin-tailwindcss/dist/cjs/cli.js:92:59)
    at reduceConfigsWithContext (/home/hariharnautiyal/tests/m-tail/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.cjs:2208:168)
    at /home/hariharnautiyal/tests/m-tail/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.cjs:2208:259
    at Array.reduce (<anonymous>)
    at reduceConfigsWithContext (/home/hariharnautiyal/tests/m-tail/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.cjs:2208:233)
    at getPostcssLoaderOptions (/home/hariharnautiyal/tests/m-tail/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.cjs:2285:28)
    at Object.handler (/home/hariharnautiyal/tests/m-tail/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.cjs:2362:56)
    at Object.callChain (/home/hariharnautiyal/tests/m-tail/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.cjs:1455:34)
    at modifyBundlerChain (/home/hariharnautiyal/tests/m-tail/node_modules/.pnpm/@[email protected]/node_modules/@rsbuild/core/dist/index.cjs:1892:94)

Here is my configuration file:

import { appTools, defineConfig } from "@modern-js/app-tools";
import { tailwindcssPlugin } from "@modern-js/plugin-tailwindcss";

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  runtime: {
    router: true,
  },
  plugins: [
    appTools({
      bundler: "rspack", // Set to 'webpack' to enable webpack
    }),
    tailwindcssPlugin(),
  ],
});

Here is my tailwind configuration file:

import type { Config } from "tailwindcss";

export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
} as Config;

Here is my index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

Also how to configure shadcn and tailwind in modern.js without these plugins.

Reproduce link

https://youtu.be/Pm9kjINagT0

Reproduce Steps

1. Initialize new app
2. Install @modern-js/plugin-tailwindcss
3. Configure tailwind.config.js
4. Configure index.css
5. Run

[zllkjc]

maybe related to #6756

[zllkjc]

Due to the lack of response for a long time, this issue will be temporarily closed. If there are still any questions, please feel free to reopen this issue.