如何使用Tailwind CSS实现单侧（右侧）阴影效果？

• 自定义Tailwind阴影配置
  在tailwind.config.js中扩展阴影主题，添加专属的右侧阴影类：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    theme: {
      extend: {
        boxShadow: {
          'right-xl': '10px 0 15px -3px rgba(0, 0, 0, 0.1), 4px 0 6px -2px rgba(0, 0, 0, 0.05)',
        },
      },
    },
  }
  

  配置完成后，直接使用shadow-right-xl类就能给元素添加和shadow-xl质感一致的单侧右侧阴影。

• 直接使用内联样式快速实现
  若不想修改配置文件，可直接通过内联样式指定阴影：

  <div class="w-64 h-32 bg-white" style="box-shadow: 10px 0 15px -3px rgba(0, 0, 0, 0.1), 4px 0 6px -2px rgba(0, 0, 0, 0.05);">
    带右侧阴影的元素
  </div>
  

  这里的阴影参数是参考shadow-xl的默认模糊、扩散值调整而来，仅保留右侧方向的偏移。

• 阴影参数调整逻辑
  Tailwind默认shadow-xl的阴影值为0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)，其中第一个数值是水平偏移（正数向右，负数向左），第二个是垂直偏移。要实现单侧右侧阴影，只需将水平偏移设为正数，垂直偏移设为0，再根据需求调整模糊半径和扩散半径即可。

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