如何在Tailwind CSS中实现分割式背景效果？

要实现左半部分白色、右半部分bg-gray-100的左右分割背景，对应你给出的原生CSS代码，下面提供几种Tailwind实现方式：

方式一：内联样式直接实现 #

适合快速测试或一次性场景，直接在元素上写原生渐变样式，也可以用Tailwind的颜色变量保持风格统一：

<!-- 硬编码颜色值 -->
<div class="h-screen" style="background: linear-gradient(to right, white 0%, white 50%, #f3f4f6 50%, #f3f4f6 100%);"></div>

<!-- 使用Tailwind颜色变量（推荐） -->
<div class="h-screen" style="background: linear-gradient(to right, theme('colors.white') 0%, theme('colors.white') 50%, theme('colors.gray.100') 50%, theme('colors.gray.100') 100%);"></div>

方式二：自定义可复用工具类（推荐） #

在tailwind.config.js中添加自定义背景图工具类，之后就能像使用原生Tailwind类一样调用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      backgroundImage: {
        'split-white-gray': 'linear-gradient(to right, white 0%, white 50%, #f3f4f6 50%, #f3f4f6 100%)',
      },
    },
  },
  plugins: [],
}

使用时直接添加类名：

<div class="h-screen bg-split-white-gray"></div>

方式三：用Tailwind渐变工具类组合实现 #

利用Tailwind的渐变方向和背景尺寸/定位类实现，原理是让渐变背景宽度为元素的200%，通过定位展示左右分割效果：

<div class="h-screen bg-gradient-to-r from-white to-gray-100 [background-position:0_50%] [background-size:200%_100%]"></div>

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