8. Tailwind CSS 自定义主题的创建

Tailwind CSS 是一个功能类优先的 CSS 框架，它允许开发者通过配置文件来自定义设计系统。本文将指导你如何创建一个自定义主题，以及如何在项目中应用这些自定义样式。

配置文件

Tailwind 的配置文件 tailwind.config.js 是自定义主题的起点。你可以在这里定义你的颜色、字体、边距等。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
        'brand-red': '#ef4444',
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      fontFamily: {
        sans: ['Graphik', 'sans-serif'],
        serif: ['Merriweather', 'serif'],
      },
      // 其他自定义设置...
    },
  },
  
  plugins: [
    // 添加插件...
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

颜色

在 colors 部分，你可以添加你的品牌颜色或者任何你需要的颜色。

// 在 extend.colors 中添加自定义颜色
colors: {
  'brand-blue': '#1992d4', // 品牌蓝色
  'brand-red': '#ef4444',  // 品牌红色
},
1
2
3
4
5

间距

Tailwind 使用一个预设的间距比例。在 spacing 部分，你可以添加额外的尺寸。

// 在 extend.spacing 中添加自定义间距
spacing: {
  '128': '32rem', // 128类对应32rem
  '144': '36rem', // 144类对应36rem
},
1
2
3
4
5

字体

在 fontFamily 部分，你可以定义你的字体栈。

// 在 extend.fontFamily 中添加自定义字体
fontFamily: {
  sans: ['Graphik', 'sans-serif'], // 无衬线字体
  serif: ['Merriweather', 'serif'], // 有衬线字体
},
1
2
3
4
5

应用自定义主题

一旦你定义了自定义主题，你可以在你的 HTML 中通过类名来应用这些样式。

<div class="bg-brand-blue text-brand-red">
  
div>


<div class="mt-128 mb-144">
  
div>


<div class="font-sans">
  
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

总结

通过Tailwind CSS的自定义主题功能，你可以快速地构建一个符合品牌风格的设计系统。

​