🧙

twin.macroで、TailwindCSSを使う

2021/03/10に公開

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のエコシステムを活用していきます。
https://github.com/ben-rogerson/twin.macro

これは、babelでのbuild時にtailwindの記法で書いたものをemotion/styled-componentsに直すものです。よってruntimeでは、通常通りcss in jsで書いたファイルサイズ以上になることはありません。
また、両方の記法を両立できるので新規開発分だけの移行や移行がすぐにできない部分を浮ぼらせつつも、できるところだけをその場で移行していくことができます。

READMEが豊富なので導入には十分だと思いますが、pluginの設定など忘れないようにしないとかなり辛いです。

Discussion