Implementation:Langgenius Dify Tailwind Common Config

Knowledge Sources	Langgenius_Dify
Domains	Frontend, DesignSystem, CSS, BuildConfig
Last Updated	2026-02-12 07:00 GMT

Overview

Shared Tailwind CSS theme configuration that defines the Dify design system's colors, typography, breakpoints, shadows, plugins, and icon collections.

Description

web/tailwind-common-config.ts is the central Tailwind CSS configuration shared across the Dify frontend. It assembles the design system from multiple sources:

Colors: Extends the default Tailwind palette with:

Gray scale (25-900) using a custom neutral palette
Primary scale (25-900) using a blue-dominant brand palette
Accent colors for blue, green, yellow, purple, and indigo with selected shades
Theme variable colors spread from tailwindThemeVarDefine (~800 CSS custom property tokens)

Typography: Uses the custom typography.js plugin configuration for prose styling.

Breakpoints: Defines custom responsive screens:

mobile: 100px
tablet: 640px
pc: 769px
2k: 2560px

Box shadows: 8 shadow levels (xs through 3xl) plus semantic status indicator shadows for green, warning, red, blue, and gray badges.

Background images: Extensive set of CSS custom property-based background gradients for chatbot, chat bubbles, workflow processes, toast notifications, app details, dataset chunks, pricing, billing, and pipeline templates.

Plugins: Integrates three Tailwind plugins:

@tailwindcss/typography for prose styling
@egoist/tailwindcss-icons with heroicons, ri icons, and two custom SVG collections (public and vender icon assets)
cssAsPlugin for injecting global CSS and component-specific stylesheets (globals, action-button, badge, button, modal, premium-badge)

Configuration: Disables Tailwind's preflight to avoid conflicts with existing base styles.

Usage

This configuration is imported by the project's tailwind.config.ts and serves as the shared foundation for all Tailwind CSS usage in the Dify frontend. It should be extended per-app but not duplicated.

Code Reference

Source Location

Repository: Langgenius_Dify
File: web/tailwind-common-config.ts
Lines: 1-198

Signature

import tailwindTypography from '@tailwindcss/typography'
import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
import tailwindThemeVarDefine from './themes/tailwind-theme-var-define.ts'
import typography from './typography.js'

const config = {
  theme: {
    typography,
    extend: {
      colors: {
        gray: { /* 25-900 */ },
        primary: { /* 25-900 */ },
        ...tailwindThemeVarDefine,
      },
      screens: { mobile: '100px', tablet: '640px', pc: '769px', '2k': '2560px' },
      boxShadow: { xs: '...', sm: '...', /* ...through 3xl */ },
      backgroundImage: { 'chatbot-bg': 'var(...)', /* ...30+ entries */ },
    },
  },
  plugins: [tailwindTypography, iconsPlugin({...}), cssAsPlugin([...])],
  corePlugins: { preflight: false },
}

export default config

Import

import commonConfig from './tailwind-common-config'

// In tailwind.config.ts:
export default {
  ...commonConfig,
  content: ['./app/**/*.{ts,tsx}'],
}

I/O Contract

Inputs

Name	Type	Required	Description
N/A	N/A	N/A	Static configuration module; no runtime inputs.

Outputs

Name	Type	Description
default export	TailwindConfig	Complete Tailwind CSS configuration object with theme, plugins, and core settings

Usage Examples

Extending in a Tailwind Config

import commonConfig from './tailwind-common-config'

export default {
  ...commonConfig,
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
}

Using Custom Classes

<div class="bg-primary-600 text-gray-25 shadow-lg pc:flex tablet:block">
  <span class="text-text-primary bg-background-body">Themed content</span>
</div>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment