如何使用Tailwind CSS创建条纹背景？并将指定CSS代码转为Tailwind写法

一、基础条纹背景创建 #

Tailwind CSS提供了内置工具类快速实现常见条纹效果：

• 基础斜向条纹：用bg-stripes类，默认是45度半透明条纹，搭配颜色类可调整条纹颜色，比如bg-stripes-blue-500
• 指定条纹方向：结合bg-stripes-horizontal（水平）、bg-stripes-vertical（垂直）类，或者用任意值语法自定义方向，比如bg-[repeating-linear-gradient(90deg,...)]
• 自定义条纹尺寸：如果需要特定的条纹宽度、间隔，得通过自定义渐变实现，可选择内联样式或配置文件扩展两种方式

二、将给定CSS转换为Tailwind写法 #

你提供的原生CSS代码：

background: repeating-linear-gradient(
  to bottom,
  #039BE5 0px,
  #039BE5 20px,
  #90CAF9 20px,
  #90CAF9 40px
);

方法1：任意值语法（快速实现） #

直接在元素上使用Tailwind的任意背景值类，无需修改配置：

<div class="bg-[repeating-linear-gradient(to_bottom,#039BE5_0px,#039BE5_20px,#90CAF9_20px,#90CAF9_40px)]"></div>

方法2：配置文件自定义工具类（适合复用） #

如果需要在多个地方复用该条纹背景，可在tailwind.config.js中扩展背景图片：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      backgroundImage: {
        'blue-stripes': 'repeating-linear-gradient(to bottom, #039BE5 0px, #039BE5 20px, #90CAF9 20px, #90CAF9 40px)',
      },
    },
  },
  plugins: [],
}

之后就能在元素上直接使用自定义类：

<div class="bg-blue-stripes"></div>

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