样式

本项目已集成 Tailwind CSS 支持，开发者可根据需求灵活使用实用类进行快速布局与样式编写。Tailwind 提供了高度可组合的原子化 CSS 类，极大提升了开发效率和响应式能力。

✅ 集成方式

配置 tailwind.config.js：

module.exports = {
    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    theme: {
        colors: {
            white: 'var(--color-white)',
            primary: {
                DEFAULT: 'var(--el-color-primary)',
                'light-3': 'var(--el-color-primary-light-3)',
                'light-5': 'var(--el-color-primary-light-5)',
                'light-7': 'var(--el-color-primary-light-7)',
                'light-8': 'var(--el-color-primary-light-8)',
                'light-9': 'var(--el-color-primary-light-9)',
                'dark-2': 'var(--el-color-primary-dark-2)'
            },
            success: 'var(--el-color-success)',
            warning: 'var(--el-color-warning)',
            danger: 'var(--el-color-danger)',
            error: 'var(--el-color-error)',
            info: 'var(--el-color-info)',
            body: 'var(--el-bg-color)',
            page: 'var(--el-bg-color-page)',
            'tx-primary': 'var(--el-text-color-primary)',
            'tx-regular': 'var(--el-text-color-regular)',
            'tx-secondary': 'var(--el-text-color-secondary)',
            'tx-placeholder': 'var(--el-text-color-placeholder)',
            'tx-disabled': 'var(--el-text-color-disabled)',
            br: 'var(--el-border-color)',
            'br-light': 'var(--el-border-color-light)',
            'br-extra-light': 'var(--el-border-color-extra-light)',
            'br-dark': 'var( --el-border-color-dark)',
            fill: 'var(--el-fill-color)',
            'fill-light': 'var(--el-fill-color-light)',
            'fill-lighter': 'var(--el-fill-color-lighter)',
            mask: 'var(--el-mask-color)',
            'slate-50': 'rgb(248 250 252 / var(--tw-bg-opacity, 1))'
        },
        fontFamily: {
            sans: ['PingFang SC', 'Arial', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
        },
        boxShadow: {
            DEFAULT: 'var(--el-box-shadow)',
            light: 'var(--el-box-shadow-light)',
            lighter: 'var(--el-box-shadow-lighter)',
            dark: 'var(--el-box-shadow-dark)'
        },
        fontSize: {
            xs: 'var(--el-font-size-extra-small)',
            sm: 'var( --el-font-size-small)',
            base: 'var( --el-font-size-base)',
            lg: 'var( --el-font-size-medium)',
            xl: 'var( --el-font-size-large)',
            '2xl': 'var( --el-font-size-extra-large)',
            '3xl': '20px',
            '4xl': '24px',
            '5xl': '28px',
            '6xl': '30px',
            '7xl': '36px',
            '8xl': '48px',
            '9xl': '60px'
        },
        spacing: {
            px: '1px',
            0: '0px',
            0.5: '2px',
            1: '4px',
            1.5: '6px',
            2: '8px',
            2.5: '10px',
            3: '12px',
            3.5: '14px',
            4: '16px',
            5: '20px',
            6: '24px',
            7: '28px',
            8: '32px',
            9: '36px',
            10: '40px',
            11: '44px',
            12: '48px',
            14: '56px',
            16: '64px',
            20: '80px',
            24: '96px',
            28: '112px',
            32: '128px',
            36: '144px',
            40: '160px',
            44: '176px',
            48: '192px',
            52: '208px',
            56: '224px',
            60: '240px',
            64: '256px',
            72: '288px',
            80: '320px',
            96: '384px'
        },
        lineHeight: {
            none: '1',
            tight: '1.25',
            snug: '1.375',
            normal: '1.5',
            relaxed: '1.625',
            loose: '2',
            3: '12px',
            4: '16px',
            5: '20px',
            6: '24px',
            7: '28px',
            8: '32px',
            9: '36px',
            10: '40px'
        }
    }
}

💡 使用示例

传统写法（SCSS / CSS）：

<div class="container">
  <button class="btn-primary">提交</button>
</div>

Tailwind 写法：

<div class="max-w-screen-lg mx-auto p-4">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    提交
  </button>
</div>

Tailwind 的原子类命名方式，使你无需反复编写 CSS，即可构建高度定制化的 UI。

🧩 Tailwind 在项目中的优势

特性	描述
⚡ 快速开发	减少 CSS 编写，直接在 HTML 中通过类名控制样式
📱 响应式设计	内置断点支持（sm, md, lg, xl），轻松实现响应式布局
🎨 主题定制	支持通过 tailwind.config.js 自定义颜色、字体、间距等
🧼 清洁代码	不产生冗余 CSS，仅生成实际用到的样式
🔁 可与 SCSS 共存	Tailwind 与项目中原有 SCSS/CSS 并行使用，互不干扰
🧱 组件友好	支持在组件中混合使用 Tailwind 和自定义 class

🧪 示例：Tailwind 在 Vue 组件中的使用

<template>
  <div class="flex flex-col md:flex-row justify-between items-center p-6 bg-gray-100 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4 md:mb-0">用户信息</h2>
    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded transition duration-300">
      编辑资料
    </button>
  </div>
</template>

📝 注意事项

Tailwind 的类名较多，建议配合 VSCode 插件如 Headwind 使用；
Tailwind 适合用于结构和布局样式，复杂动画或特殊样式仍建议使用 SCSS 或 CSS；
所有 Tailwind 类都可通过 class="" 直接使用，无需额外引入；
开启 @apply 指令可在 SCSS 文件中复用 Tailwind 类；

📚 文档参考

Tailwind CSS 官方文档

样式

On this page