Matsuri-tech Frontend Weekly 2023-12-22



React AreaTailwind CSSMFW


社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# React Aria Components v1

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

December 20, 2023 ReleaseIn this release, we’re promoting React Aria Components from RC to GA 🎉, optimizing our included translation files, shipping a storybook based on all our React Aria Components with a starter theme, and fixing plenty of bugs.December 20, 2023 Release

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

React AriaCraft world-class accessible components with custom styles.React Aria

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を利用していませんが話題性があると思ったので取り上げます。

Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more - Tailwind CSSThere’s nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on that inspiration and turned it into this — Tailwind CSS v3.4.Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more - Tailwind CSS

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

// * 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 ...">

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

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