編集

Tailwind CSS v3.4

#Tailwind CSS #Catalyst

2023 年 12 月 20 日に Tailwind CSS v3.4 がリリースされました。

弊社では、Tailwind CSS を利用していませんが話題性があると思ったので取り上げます。

https://tailwindcss.com/blog/tailwindcss-v3-4

Tailwind CSS v3.4 では、Dynamic viewport units（dvh、lvh、svh）のサポート、:has()のサポート、子要素にスタイルを適用する* variant のサポート、size-* utility の追加、Subgrid のサポートなどが行われました。

jsx
// Dynamic viewport units
<div class="h-dvh"></div>

// :has()
<label class="has-[:checked]:ring-indigo-500 has-[:checked]:text-indigo-900 has-[:checked]:bg-indigo-50 ..">
  <svg fill="currentColor"></svg>
  Google Pay
  <input type="radio" class="accent-indigo-500 ..." />
</label>

// * variant
<ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
  <li>Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
</ul>

// size-* utility
// <img class="h-10 w-10" ...>
<img class="size-10" .../>

// Subgrid
<div class="grid grid-cols-4 gap-4">
  <div class="grid grid-cols-subgrid gap-4 col-span-3">
      <div class="col-start-2">06</div>
  </div>
</div>

また Tailwind Labs から shadcn/ui と同様の仕組みの UI Kit である Catalyst がリリースされました。Catalyst は React Aria を利用しています。

http://tailwindcss.com/blog/introducing-catalyst

編集