Tailwind CSS - 添加自定义样式

Tailwind CSS：自定义和扩展框架

虽然 Tailwind CSS 开箱即用地提供了一套全面的实用工具类，但每个项目都有独特的设计要求。Tailwind 从一开始就被设计为高度可定制的。本指南涵盖了扩展和自定义 Tailwind 以适应项目特定需求的现代技术。

1. 自定义您的主题

自定义 Tailwind 最常见和推荐的方法是编辑您的 tailwind.config.js 文件中的 theme 对象。这是您定义项目设计系统的地方，包括颜色、间距、字体等。

您可以扩展默认主题以添加新值，或者完全覆盖默认主题的某些部分。

示例：定义自定义品牌调色板和间距

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,jsx}'],
  theme: {
    extend: {
      // 在此处添加您的自定义值
      colors: {
        'brand-primary': '#4F46E5', // 用于按钮、链接等
        'brand-secondary': '#F59E0B', // 用于强调、警告
        'brand-muted': '#6B7280',    // 用于次要文本
      },
      spacing: {
        '128': '32rem', // 添加一个更大的间距单位
      },
      borderRadius: {
        '4xl': '2rem',
      },
      fontFamily: {
        'sans': ['Inter', 'sans-serif'], // 设置自定义默认字体
        'display': ['Lexend', 'sans-serif'], // 用于标题
      }
    },
  },
  plugins: [],
};

现在您可以在 HTML 中将这些自定义值用作实用工具类。

<button class="bg-brand-primary text-white font-bold py-3 px-6 rounded-lg hover:bg-opacity-90">
  Sign Up Now
</button>

<h1 class="font-display text-4xl text-gray-900">
  A Custom Heading Font
</h1>

<div class="mt-128 p-8 bg-gray-100 rounded-4xl">
  A container with custom margin, padding, and border radius.
</div>

2. 使用任意值实现一次性样式

有时您需要一个非常具体的值，它不属于您的主题，并且使用频率不高，不值得将其添加到主题中。对于这些一次性情况，Tailwind 的 JIT（即时）引擎允许您使用方括号 [] 表示法直接在 HTML 中使用 任意值。

示例：精确尺寸和颜色

<!-- Set a top position of exactly 117px -->
<div class="top-[117px]">
  ...
</div>

<!-- Use a specific, non-theme color -->
<div class="bg-[#bada55]">
  A green div
</div>

<!-- Apply a complex grid column definition -->
<div class="grid grid-cols-[1fr_auto_1fr]">
  ...
</div>

<!-- Use theme values inside arbitrary values for consistency -->
<div class="w-[theme(spacing.128)]">
  This div's width is based on our custom spacing scale.
</div>

最佳实践： 将任意值用于真正独特的样式。如果您发现自己反复使用相同的任意值，请考虑将其添加到您的 tailwind.config.js 主题中。

3. 使用 @layer 添加自定义 CSS

当您需要定义可复用组件类或添加实用工具类未涵盖的自定义 CSS 属性时，可以在主 CSS 文件中使用 @layer 指令。这确保您的自定义样式在 Tailwind 的层系统中得到正确处理，从而允许它们被实用工具类修改。

Tailwind 有三个主要层：base（用于元素默认值）、components（用于组件类）和 utilities（用于实用工具类）。后一层中的样式将覆盖前一层中的样式。

示例：创建自定义按钮组件类

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply py-2 px-4 rounded-md font-semibold text-white transition-colors duration-300;
  }
  .btn-primary {
    @apply bg-brand-primary hover:bg-blue-700;
  }
  .btn-secondary {
    @apply bg-brand-secondary hover:bg-amber-600;
  }
}

现在您可以在 HTML 中使用这些类，并且它们仍然可以被实用工具类覆盖。

<!-- A standard primary button -->
<button class="btn btn-primary">Primary Action</button>

<!-- A secondary button with extra margin -->
<button class="btn btn-secondary mt-4">Secondary Action</button>

4. 使用插件扩展 Tailwind

对于更复杂或可共享的自定义，您可以创建 Tailwind 插件。插件允许您以编程方式添加新样式、变体和实用工具类。这是扩展 Tailwind 最强大的方式。

示例：一个用于文本渐变的简单插件

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ... 其他配置
  plugins: [
    plugin(function({ addUtilities, theme }) {
      const newUtilities = {
        '.text-gradient-primary': {
          'background-image': `linear-gradient(to right, ${theme('colors.blue.500')}, ${theme('colors.purple.500')})`,
          'background-clip': 'text',
          '-webkit-background-clip': 'text',
          'color': 'transparent',
        },
      }
      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}

这个插件创建了一个 .text-gradient-primary 实用工具类，您现在可以在您的项目中使用它。

处理歧义和框架

解决歧义： 当一个任意值可能适用于多个属性时（例如，text-[var(--my-color)]），您可以添加类型提示进行澄清：text-[color:var(--my-color)] 或 text-[length:var(--my-size)]。
组件框架（React、Vue、Svelte）： @layer 指令在组件文件的 <style> 块内不起作用，因为每个组件都是独立处理的。推荐的方法是直接在您的 JSX/模板标记中使用实用工具类。如果您必须创建组件类，请在您的全局 CSS 文件中定义它们，而不是在单个组件中定义。