🧙
twin.macroで、TailwindCSSを使う
Component based CSS
componentは常にCSSとHTML(+ js)で成り立っており、css要素をコンポーネントごとに管理するのは理にかなっているといえます。さらに、ネームスペース管理や可読性などの問題から解放されるためにcss in jsを使用して、コンポーネントベースにCSSを書いてきました。
import { css, cx } from '@emotion/css'
...
return (
<div
className={css`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
&:hover {
color: white;
}
`}
>
Hover to change color.
</div>
)
Utility First
しかし、アジャイル開発の普及などによって、以前よりもよりデザイナー(+チーム)と密接に会話し、素早くUIを組み立てる必要性が高まっています。そこで、Utility-Firstです。事前に定めたデザイントークンのみを使用してUIを構築することで、チーム内の共通言語自体がstyleとなり開発と改善が円滑に進みます。
...
return (
<div className="p-24 bg-pink-500 font-semibold rounded-sm hover:text-white">
Hover to change color.
</div>
)
twin.macro
ただし、実際導入するにあたって、運用期間の長いprojectなどでデザイントークンの整理に時間がかかったり、落としきれないケースが残ってしまう場合もあります。そこでベースはcss in jsのままに、tailwindのエコシステムを活用していきます。
これは、babelでのbuild時にtailwindの記法で書いたものをemotion/styled-componentsに直すものです。よってruntimeでは、通常通りcss in jsで書いたファイルサイズ以上になることはありません。
また、両方の記法を両立できるので新規開発分だけの移行や移行がすぐにできない部分を浮ぼらせつつも、できるところだけをその場で移行していくことができます。
Discussion