How to Use Tailwind v4 with wp-scripts in WordPress Gutenberg

[bi1101]

I am trying to integrate Tailwind v4 with the wp-scripts package in a Plugin setting page.

Steps Taken:

• Followed the official TailwindCSS installation guide for PostCSS.
• Configured postcss.config.js based on Tailwind's recommendations.
• Ensured package.json scripts are using wp-scripts commands like build and start.

  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start --webpack-devtool --host example.local --hot",
    "format": "wp-scripts format ./src",
    "lint:js": "wp-scripts lint-js ./src"
  },

• Successfully register and enqueued the built js & css

However, when I use tailwind classes in my index.tsx, no style was applied

const SettingsPage = () => {
	return <h1 className="text-3xl font-bold text-red-900">Hello world!</h1>;
};

Questions:

1. Has anyone successfully integrated Tailwind v4 with wp-scripts in a Gutenberg project?
2. Are there specific configurations or scripts required for this setup?
3. Any common pitfalls or troubleshooting tips?

Any help or pointers would be greatly appreciated!