All Posts
News bits
Tailwind CSS v3.4
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 を利用しています。
著者について
Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.
In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.
In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.
In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.
I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.