Tailwind CSSでclip-pathを使う

Tailwind CSSでclip-pathを使う方法を説明します。

2025-6-3
バージョン
  • tailwindcss 4系

Tailwind CSSの4系でclip-pathを使う方法を説明します。

以下のように[]で囲って指定することができます。

半角スペースは、_を使って指定します。

<span class="[clip-path:polygon(50%_0,0_100%,100%_100%)]"></span>

これで以下のように出力されます。

clip-path: polygon(50% 0, 0 100%, 100% 100%);