Tailwind CSSでclip-pathを指定する

Tailwind CSSを使用中にclip-pathを指定しようとして迷うことがあったので、指定方法についてメモ。

サンプルコード

角括弧でプロパティと値を囲って指定します。

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

半角スペースの代わりにアンダーバー(_)を使って指定しています。

CSSで以下のように出力されました。

.\[clip-path\:polygon\(50\%_0\%\2c 0\%_100\%\2c 100\%_100\%\)\] {
  clip-path: polygon(50% 0%,0% 100%,100% 100%);
}

今回はclip-pathの指定で使用しましたが、mask-imageやカスタムプロパティの設定などにも使えるようです。