diff --git a/web/app/components/base/badge/index.tsx b/web/app/components/base/badge/index.tsx
index 9120b28ea6..62029c3058 100644
--- a/web/app/components/base/badge/index.tsx
+++ b/web/app/components/base/badge/index.tsx
@@ -3,7 +3,6 @@ import type { CSSProperties, ReactNode } from 'react'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
-import './index.css'
 
 enum BadgeState {
   Warning = 'warning',
diff --git a/web/app/components/base/premium-badge/index.tsx b/web/app/components/base/premium-badge/index.tsx
index 50a5832a28..297e05fe42 100644
--- a/web/app/components/base/premium-badge/index.tsx
+++ b/web/app/components/base/premium-badge/index.tsx
@@ -4,7 +4,6 @@ import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { Highlight } from '@/app/components/base/icons/src/public/common'
 import { cn } from '@/utils/classnames'
-import './index.css'
 
 const PremiumBadgeVariants = cva(
   'premium-badge',
diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index b7bb89e11c..cf183cad4e 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -1,15 +1,16 @@
 @import "preflight.css";
 
-
 @import '../../themes/light.css';
 @import '../../themes/dark.css';
 @import "../../themes/manual-light.css";
 @import "../../themes/manual-dark.css";
 @import "./monaco-sticky-fix.css";
 
-@import "../components/base/button/index.css";
 @import "../components/base/action-button/index.css";
+@import "../components/base/badge/index.css";
+@import "../components/base/button/index.css";
 @import "../components/base/modal/index.css";
+@import "../components/base/premium-badge/index.css";
 
 @tailwind base;
 @tailwind components;
diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index 62a2db2caf..cf7825fc61 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -7,6 +7,10 @@ import sonar from 'eslint-plugin-sonarjs'
 import storybook from 'eslint-plugin-storybook'
 import dify from './eslint-rules/index.js'
 
+// Enable Tailwind CSS IntelliSense mode for ESLint runs
+// See: tailwind-css-plugin.ts
+process.env.TAILWIND_MODE ??= 'ESLINT'
+
 export default antfu(
   {
     react: {
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts
index 3d592cda89..a1898fbcef 100644
--- a/web/tailwind-common-config.ts
+++ b/web/tailwind-common-config.ts
@@ -182,6 +182,11 @@ const config = {
     }),
     cssAsPlugin([
       path.resolve(_dirname, './app/styles/globals.css'),
+      path.resolve(_dirname, './app/components/base/action-button/index.css'),
+      path.resolve(_dirname, './app/components/base/badge/index.css'),
+      path.resolve(_dirname, './app/components/base/button/index.css'),
+      path.resolve(_dirname, './app/components/base/modal/index.css'),
+      path.resolve(_dirname, './app/components/base/premium-badge/index.css'),
     ]),
   ],
   // https://github.com/tailwindlabs/tailwindcss/discussions/5969
diff --git a/web/tailwind-css-plugin.ts b/web/tailwind-css-plugin.ts
index bbe0d69421..4c7acb3069 100644
--- a/web/tailwind-css-plugin.ts
+++ b/web/tailwind-css-plugin.ts
@@ -7,9 +7,11 @@ import { parse } from 'postcss'
 import { objectify } from 'postcss-js'
 
 export const cssAsPlugin: (cssPath: string[]) => PluginCreator = (cssPath: string[]) => {
-  if (process.env.NODE_ENV === 'production') {
+  const isTailwindCSSIntelliSenseMode = 'TAILWIND_MODE' in process.env
+  if (!isTailwindCSSIntelliSenseMode) {
     return () => {}
   }
+
   return ({ addUtilities, addComponents, addBase }) => {
     const jssList = cssPath.map(p => objectify(parse(readFileSync(p, 'utf8'))))