如何在Tailwind CSS中使用clip-path属性实现元素裁剪？

直接使用动态工具类（Tailwind v3.1+） #

Tailwind 3.1及以上版本支持通过动态值工具类直接调用clip-path，只需把属性值里的空格替换成下划线即可：

<div class="relative">
  <img 
    src="your-image.jpg" 
    alt="Your Image" 
    class="absolute inset-0 w-full h-full object-cover clip-path-[polygon(0_0,100%_0,100%_80%,0_100%)]"
  >
</div>

自定义工具类（适合重复使用的裁剪形状） #

如果这个裁剪形状需要在多处复用，推荐在tailwind.config.js中自定义工具类，调用更简洁：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.clip-path-diagonal': {
          'clip-path': 'polygon(0 0, 100% 0, 100% 80%, 0 100%)',
        }
      })
    }
  ]
}

使用时直接引用自定义类：

<div class="relative">
  <img 
    src="your-image.jpg" 
    alt="Your Image" 
    class="absolute inset-0 w-full h-full object-cover clip-path-diagonal"
  >
</div>

扩展主题配置（另一种自定义方式） #

也可以通过扩展Tailwind主题配置来添加自定义clip-path值：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      clipPath: {
        'diagonal': 'polygon(0 0, 100% 0, 100% 80%, 0 100%)',
      }
    },
  },
}

调用方式与自定义工具类一致：

<div class="relative">
  <img 
    src="your-image.jpg" 
    alt="Your Image" 
    class="absolute inset-0 w-full h-full object-cover clip-path-diagonal"
  >
</div>

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