Tailwindcss 处理背景渐变

前言

在开发中，我们经常需要使用背景渐变，但是 Tailwindcss 默认并没有提供背景渐变的工具类，所以我们需要自己来实现。

实现方法

  1. 在tailwind.config.js中添加自定义工具类：
1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
      },
    },
    colors: {
      "start-color": "#FD7A61",
      "end-color": "#FF934D",
    },
  },
};
  1. 在需要使用背景渐变的地方，使用bg-gradient工具类：
1
<div class="bg-gradient-to-r from-start-color to-end-color"></div>