Implementation:Infiniflow Ragflow Tailwind Config

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Styling, Configuration
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete Tailwind CSS configuration defining the complete design system including custom colors, spacing, animations, and dark mode support for the RAGFlow frontend.

Description

The tailwind.config.js file defines the project's custom Tailwind design system: CSS variable-based color palette (background, foreground, primary, secondary, muted, accent, destructive), border radius tokens, custom animations (accordion, collapsible), content paths for purging, and dark mode configuration using class strategy.

Usage

This file is consumed by the Tailwind CSS build process. Modify it when adding new design tokens, colors, or utility extensions.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/tailwind.config.js
• Lines: 1-233

Signature

module.exports = {
  darkMode: ['class'],
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: { background, foreground, primary, ... },
      borderRadius: { lg, md, sm },
      keyframes: { 'accordion-down', 'accordion-up', ... },
    },
  },
  plugins: [require('tailwindcss-animate')],
};

Import

# Consumed by PostCSS/Tailwind build, not imported in code

I/O Contract

Inputs

Name	Type	Required	Description
—	—	—	Build configuration; consumed by Tailwind CLI

Outputs

Name	Type	Description
CSS classes	string	Generated Tailwind utility classes

Usage Examples

// Use generated classes in components
<div className="bg-background text-foreground rounded-lg p-4">
  <h1 className="text-primary">Hello</h1>
</div>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment