Dosu Logo
Ask
Documentsdify
Tailwind CSS Integration
Tailwind CSS Integration
Type
Topic
Status
Published
Created
Jul 8, 2026
Updated
Jul 8, 2026
Created by
Dosu Bot
Updated by
Dosu Bot

Tailwind CSS Integration#

Dify's web/ frontend uses Tailwind CSS v4 with a CSS-first configuration model — there is no tailwind.config.ts . All configuration, theme tokens, and plugin wiring live in web/app/styles/tailwind-core.css.

The migration from v3 to v4 landed in PR #34415 and touched 900+ files.

Build Pipeline#

LayerFileRole
PostCSSweb/postcss.config.jsSingle plugin: @tailwindcss/postcss (replaces separate tailwindcss + autoprefixer)
Viteweb/vite.config.ts@tailwindcss/vite plugin, loaded only for non-test / non-Storybook builds

The old autoprefixer dependency was dropped because @tailwindcss/postcss bundles it .

CSS Entry Point: tailwind-core.css#

web/app/styles/tailwind-core.css is the single source of truth for all Tailwind setup:

  • Layer order declared at the top via @layer theme, base, components, utilities
  • Selective Tailwind imports — only tailwindcss/theme.css and tailwindcss/utilities.css are imported, skipping built-in preflight in favor of a local preflight.css
  • Design system — @langgenius/dify-ui/styles.css is imported to bring in the shared palette, semantic tokens, and light/dark themes
  • Theme extensions — @theme { } block adds custom breakpoints (mobile, tablet, pc, 2k) and a spin-slow animation
  • Runtime gradient tokens — @theme inline { } maps CSS variables (resolved from manual-light.css / manual-dark.css) to Tailwind's --background-image-* namespace
  • Component CSS — @layer components { } adds utilities like .text-gradient and Shiki line-number styles

Custom Plugins#

Two Tailwind plugins are registered via @plugin directives in tailwind-core.css . Both are TypeScript modules in web/app/styles/plugins/:

  • icons.ts — wraps @egoist/tailwindcss-icons with Heroicons, Remix Icon (ri), and two custom Iconify sprite collections (custom-public, custom-vender)
  • typography.ts — wraps @tailwindcss/typography and injects Dify's prose color tokens via the plugin's config merge API

v3 → v4 Migration Summary#

What was removed or replaced :

Removed (v3)Replaced by (v4)
tailwind.config.ts / tailwind-common-config.tstailwind-core.css CSS-first config
tailwind-css-plugin.ts (PostCSS-JS converter)@plugin directive in CSS
tailwindcss + autoprefixer in PostCSS@tailwindcss/postcss
postcss-js dependency— (no longer needed)
Tailwind v3 packagetailwindcss v4 + @tailwindcss/vite

The deleted tailwind-css-plugin.ts used postcss-js to convert CSS files into PostCSS objects for Tailwind IntelliSense — this workaround is unnecessary in v4's CSS-first model .