如何在Tailwind的config.js中为深色模式配置背景线性渐变？

你之前将线性渐变放在colors配置项里的做法不可行，因为Tailwind的colors字段仅用于定义纯色值，线性渐变属于背景图像类型，需要配置在backgroundImage（可简写为bgImage）中。

正确配置步骤： #

1. 修改tailwind.config.js，在theme.extend下添加backgroundImage：

theme: {
  extend: {
    backgroundImage: {
      'dark-grad': 'linear-gradient(to bottom, #181381, #150B32, #000000, #5C2C85, #590544)',
    },
    // ...其他扩展配置
  },
},

2. 在页面中使用对应的类名：

<body class="bg-dark-grad">
</body>

可选优化： #

如果需要确保渐变完全覆盖容器且不重复，可以搭配Tailwind的背景辅助类：

<body class="bg-dark-grad bg-no-repeat bg-fixed min-h-screen">
</body>

内容的提问来源于stack exchange，提问作者Thiago Humble