跳到主要内容

自定义配置

Tailwind CSS 的高度可定制性是其核心优势之一。本章将介绍如何通过配置文件自定义 Tailwind 的各个方面。

配置文件​

Tailwind CSS 的配置文件通常命名为 tailwind.config.js 或 tailwind.config.ts。

基本结构​

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

content 配置​

content 选项告诉 Tailwind 扫描哪些文件来提取类名：

export default {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './components/**/*.{vue,js}',
    './pages/**/*.{html,js}',
  ],
}
提示

正确配置 content 非常重要，否则 Tailwind 无法生成你需要的 CSS。

主题配置​

theme 选项用于自定义设计令牌，包括颜色、间距、字体等。

扩展默认主题​

使用 extend 在默认主题基础上添加新值：

export default {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#64748b',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        display: ['Oswald', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
}

覆盖默认主题​

直接在 theme 中定义会覆盖默认值：

export default {
  theme: {
    colors: {
      primary: '#3b82f6',
      secondary: '#64748b',
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
  },
}

禁用默认值​

使用 initial 禁用默认值：

export default {
  theme: {
    extend: {
      colors: {
        lime: 'initial',
        fuchsia: 'initial',
      },
    },
  },
}

自定义颜色​

添加单个颜色​

export default {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
    },
  },
}

添加颜色系列​

export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

使用 CSS 变量​

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
}

自定义间距​

export default {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
}

自定义字体​

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
        mono: ['Fira Code', 'monospace'],
        display: ['Oswald', 'sans-serif'],
      },
    },
  },
}

自定义断点​

export default {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
    },
  },
}

自定义动画​

添加动画​

export default {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'bounce-slow': 'bounce 3s infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
}

使用动画​

<div class="animate-fade-in">淡入动画</div>
<div class="animate-slide-up">向上滑动</div>
<div class="animate-bounce-slow">慢速弹跳</div>

自定义阴影​

export default {
  theme: {
    extend: {
      boxShadow: {
        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
        'inner-lg': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.1)',
      },
    },
  },
}

自定义圆角​

export default {
  theme: {
    extend: {
      borderRadius: {
        '4xl': '2rem',
        '5xl': '2.5rem',
      },
    },
  },
}

插件系统​

Tailwind 提供了插件系统来扩展功能。

官方插件​

import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import aspectRatio from '@tailwindcss/aspect-ratio'
import lineClamp from '@tailwindcss/line-clamp'

export default {
  plugins: [
    forms,
    typography,
    aspectRatio,
    lineClamp,
  ],
}

常用官方插件​

插件功能
@tailwindcss/forms表单元素重置和样式
@tailwindcss/typography排版插件，用于富文本
@tailwindcss/aspect-ratio宽高比工具类
@tailwindcss/line-clamp行数限制
@tailwindcss/container-queries容器查询

自定义插件​

const plugin = require('tailwindcss/plugin')

export default {
  plugins: [
    plugin(function({ addUtilities, addComponents, theme }) {
      addUtilities({
        '.text-shadow': {
          'text-shadow': '2px 2px 4px rgba(0, 0, 0, 0.1)',
        },
        '.text-shadow-lg': {
          'text-shadow': '4px 4px 8px rgba(0, 0, 0, 0.15)',
        },
      })
      
      addComponents({
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-primary': {
          backgroundColor: theme('colors.blue.500'),
          color: theme('colors.white'),
          '&:hover': {
            backgroundColor: theme('colors.blue.600'),
          },
        },
      })
    }),
  ],
}

@apply 指令​

在 CSS 中使用 @apply 提取重复的类：

@import "tailwindcss";

@layer components {
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white;
  }
  
  .btn-secondary {
    @apply bg-gray-500 hover:bg-gray-700 text-white;
  }
}
建议

优先使用组件抽象，@apply 仅在必要时使用。Tailwind 官方推荐保持工具类的使用方式。

@layer 指令​

使用 @layer 将自定义样式添加到特定层：

@import "tailwindcss";

@layer base {
  h1 {
    @apply text-2xl font-bold;
  }
}

@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
}

层的顺序​

  1. base：基础样式，重置和默认样式
  2. components：组件样式
  3. utilities：工具类样式

前缀配置​

为所有 Tailwind 类添加前缀，避免冲突：

export default {
  prefix: 'tw-',
}

使用时：

<div class="tw-bg-blue-500 tw-text-white tw-p-4">
  带前缀的类名
</div>

important 配置​

为所有工具类添加 !important：

export default {
  important: true,
}

或指定选择器：

export default {
  important: '#app',
}

分隔符配置​

更改响应式和状态变体的分隔符：

export default {
  separator: '_',
}

使用时：

<div class="sm_bg-blue-500 hover_bg-blue-600">
  使用下划线分隔符
</div>

核心插件配置​

禁用不需要的核心插件以减小文件大小：

export default {
  corePlugins: {
    preflight: false,
    container: false,
  },
}

实战示例​

完整配置示例​

import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'

export default {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
      },
    },
  },
  plugins: [
    forms,
    typography,
  ],
}

小结​

本章介绍了 Tailwind CSS 的自定义配置：

  • 配置文件：tailwind.config.js 的基本结构
  • 主题配置：扩展或覆盖默认主题
  • 自定义颜色：添加品牌色和颜色系列
  • 自定义间距、字体、断点：根据项目需求定制
  • 自定义动画：添加自定义动画和关键帧
  • 插件系统：使用官方插件和自定义插件
  • @apply 指令：提取重复的类组合
  • @layer 指令：将样式添加到特定层

下一章，我们将提供 Tailwind CSS 的速查表。