The JavaScript configuration and plugin snippets here target Tailwind CSS 3. Tailwind CSS 4 uses CSS-first configuration; explicitly load a compatible legacy config with @config rather than assuming automatic discovery. Upgrade guide.

「 When should you change config and when shouldn't you? 」。

1. What is tailwind.config.js for?

In one sentence:

Design System (Design Token) Configuration Center

You define here:

• color system
• spacing / font size / rounded corners
• breakpoint
• animation
• dark mode
• plug-in

// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: { },
  plugins: []
}

2. theme vs extend (key points)

1️⃣ theme: Completely override the default value

❌ Not recommended for novices

theme: {
  colors: {
    primary: '#1677ff'
  }
}

⚠️ Consequences: 👉 Default red / blue / gray are all gone

2️⃣ extend: Extend on the default basis (99% use this)

✅ Correct posture

theme: {
  extend: {
    colors: {
      primary: '#1677ff'
    }
  }
}

📌 Conclusion

👉 Business projects: Always use extend first

3. The most commonly used extend item

1️⃣ Colors

Define dominant/semantic colors

extend: {
  colors: {
    primary: '#1677ff',
    success: '#52c41a',
    warning: '#faad14',
    danger: '#ff4d4f'
  }
}

Use:

<div class="bg-primary text-white"></div>

Define a complete set of color levels (recommended)

colors: {
  primary: {
    50:  '#e6f4ff',
    100: '#bae0ff',
    500: '#1677ff',
    700: '#0958d9'
  }
}

<div class="bg-primary-500 hover:bg-primary-700"></div>

📌 This is like a design system

2️⃣ Font size (fontSize)

extend: {
  fontSize: {
    xs: ['12px', '16px'],
    sm: ['14px', '20px'],
    base: ['16px', '24px'],
    lg: ['18px', '28px']
  }
}

Structure:

fontSize: [fontSize, lineHeight]

3️⃣ Spacing

extend: {
  spacing: {
    18: '72px',
    22: '88px'
  }
}

<div class="mt-18 px-22"></div>

📌 Commonly used in irregular design drafts

4️⃣ Rounded corners (borderRadius)

extend: {
  borderRadius: {
    xl: '12px',
    '2xl': '16px'
  }
}

5️⃣ Shadow (boxShadow)

extend: {
  boxShadow: {
    card: '0 4px 12px rgba(0,0,0,.08)',
    popup: '0 8px 24px rgba(0,0,0,.12)'
  }
}

<div class="shadow-card"></div>

6️⃣ Breakpoints (screens)

extend: {
  screens: {
    xs: '480px',
    '3xl': '1600px'
  }
}

<div class="xs:text-sm 3xl:text-xl"></div>

4. Dark mode configuration (commonly used)

export default {
  darkMode: 'class'
}

Use:

<div class="bg-white dark:bg-gray-900"></div>

Vue switch:

document.documentElement.classList.toggle('dark')

5. Animation & keyframes (advanced but commonly used)

Define animation

extend: {
  keyframes: {
    fadeIn: {
      '0%': { opacity: 0 },
      '100%': { opacity: 1 }
    }
  },
  animation: {
    fade: 'fadeIn .3s ease-out'
  }
}

<div class="animate-fade"></div>

6. Abstract style: @apply (cautious)

/* main.css */
.btn {
  @apply px-4 py-2 rounded bg-primary text-white hover:bg-primary-700;
}

📌 Principles of use

• Component Library/Public Components ✅
• Page private style ❌ (direct class)

7. Pitfalls in cooperation with Vue / Vite

1️⃣ content must be complete

content: [
  './index.html',
  './src/**/*.{vue,js,ts}'
]

2️⃣ Dynamic classes will be purged away

❌

<div :class="`bg-${color}-500`" />

✅

const colorMap = {
  primary: 'bg-primary-500',
  danger: 'bg-danger-500'
}

8. Recommend a set 【 Enterprise-level config template 】

export default {
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#e6f4ff',
          500: '#1677ff',
          700: '#0958d9'
        }
      },
      boxShadow: {
        card: '0 4px 12px rgba(0,0,0,.08)'
      },
      borderRadius: {
        xl: '12px'
      }
    }
  }
}

9. When should I change the config?

✅ Should be changed

• The design draft has clear main color / rounded corners / shadow specifications
• Want to unify the style
• Make component library/middle and backend

❌ should not be changed

• Just a special style for a certain page
• One-time demo
• Pure pilot project