React Aria Components v1

2023年12月20日にReact Aria ComponentsがGAリリースされました。

https://react-spectrum.adobe.com/releases/2023-12-20.html

併せてReact Ariaを紹介するLanding Pageも公開されています。

https://react-spectrum.adobe.com/react-aria/index.html

React Aria componentsは、アクセシブルなコンポーネントを構築するためのhooksとutilityを提供するReact Aria hooksを元に構築されており、アクセシブルなコンポーネントを構築する、より簡単な方法を提供します。

アクセシブルなコンポーネントのためのhooksとutilityを提供するReact Aria hooksを元に構築されており、

Tailwind CSS v3.4

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のサポートなどが行われました。

// 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