Frontend Weekly 2023-12-22
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 を利用しています。