Implementation:Langgenius Dify Tailwind Theme Var Define

Knowledge Sources	Langgenius_Dify
Domains	Frontend Styling, Design System, Theming
Last Updated	2026-02-08 00:00 GMT

Overview

A machine-generated TypeScript module that maps Tailwind CSS utility class names to CSS custom properties (variables), enabling the Dify design system's theming layer.

Description

The tailwind-theme-var-define.ts file is an auto-generated mapping that bridges Tailwind CSS utility classes to CSS custom properties. Each key in the exported vars object becomes a Tailwind color utility (e.g., text-primary, bg-components-button-primary-bg), and each value references a corresponding CSS custom property (e.g., var(--color-text-primary), var(--color-components-button-primary-bg)).

This architecture supports Dify's theme system by:

1. Decoupling color values from utility classes -- Actual color values are defined elsewhere in CSS (likely tied to light/dark mode), while this file provides the Tailwind configuration bridge.
2. Enabling runtime theme switching -- Since all colors resolve to CSS custom properties, themes can be changed by updating the CSS variable values without recompiling Tailwind.

The file contains approximately 765 entries organized into logical sections:

• Components (~360 entries) -- Input, button (primary/secondary/tertiary/ghost/destructive variants), checkbox, radio, toggle, card, menu, panel, slider, segmented control, option card, tab, badge, chart, actionbar, dropzone, progress, chat input, avatar, label, premium badge, progress bar, icon backgrounds.
• Text (~22 entries) -- Primary, secondary, tertiary, quaternary, destructive, success, warning, accent, placeholder, disabled, inverted.
• Background (~40 entries) -- Body, default, soft, gradient fills, masks, overlays, sections.
• Shadow (~10 entries) -- Shadow levels 1-10.
• Workflow (~50 entries) -- Block, canvas, link (normal/failure/success/error), minimap, display states (success/error/warning/normal/disabled), progress.
• Divider (~8 entries) -- Subtle, regular, deep, burn, intense, solid, accent.
• State (~25 entries) -- Base, accent, destructive, success, warning hover/active states.
• Effects (~4 entries) -- Highlight, image frame, icon border.
• Utility colors (~170 entries) -- Full color palettes (50-700 shades) for orange-dark, orange, pink, fuchsia, purple, indigo, blue, blue-light, gray-blue, blue-brand, red, green, warning, yellow, teal, cyan, violet, gray, green-light, rose, midnight.
• Third party (~10 entries) -- LangChain, Langfuse, GitHub, OpenAI, Anthropic, AWS brand colors.
• SaaS (~10 entries) -- Dify cloud-specific colors.
• Dify logo (2 entries) -- Logo blue and black colors.

The file header states "Generate by code. Don't update by hand!!!" -- it is maintained by an automated pipeline (likely from the design system).

Usage

This file is consumed by the Tailwind CSS configuration to extend the color palette with theme-aware CSS variable references. Developers use these as standard Tailwind utility classes (e.g., text-text-primary, bg-components-panel-bg) without needing to know the underlying CSS variable names.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/themes/tailwind-theme-var-define.ts
• Lines: 1-767

Signature

const vars: Record<string, string> = {
  'components-input-bg-normal': 'var(--color-components-input-bg-normal)',
  'text-primary': 'var(--color-text-primary)',
  'background-body': 'var(--color-background-body)',
  'workflow-block-bg': 'var(--color-workflow-block-bg)',
  // ... ~765 total entries
}
export default vars

Import

import vars from '@/themes/tailwind-theme-var-define'

// Typically used in tailwind.config.js to extend colors:
// colors: { ...vars }

I/O Contract

Inputs

Name	Type	Required	Description
(none)	N/A	N/A	This is a static generated file with no runtime inputs

Outputs

Name	Type	Description
default export	Record<string, string>	Object mapping ~765 Tailwind utility names to CSS custom property references

Usage Examples

{/* Using theme variables as Tailwind utility classes in JSX */}
<div className="bg-background-body text-text-primary">
  <button className="bg-components-button-primary-bg text-components-button-primary-text
                      hover:bg-components-button-primary-bg-hover
                      border border-components-button-primary-border">
    Click me
  </button>
  <div className="border-b border-divider-regular" />
  <span className="text-text-secondary">Secondary text</span>
</div>

{/* Workflow-specific styling */}
<div className="bg-workflow-canvas-workflow-bg">
  <div className="bg-workflow-block-bg border border-workflow-block-border" />
</div>

Related Pages

• Langgenius_Dify_Typography -- Typography plugin configuration that also leverages Tailwind CSS theming