More than 3 years have passed since last update.

【初期導入がおすすめ】Tailwind.macro + emotionでデザインシステムベースのCSS-in-JSをしよう

Last updated at 2020-07-19Posted at 2020-02-15

はじめに

Tailwind.macro + emotionによって、迅速かつ保守性の高いコードベースが構築できます。

どうやって？

まずはライブラリの紹介をします。

TailwindCSSをbabel-plugin-macrosを通して、使えるようにしたものです。

（Tailwindについては公式が一番ですが、日本語の素晴らしい記事もありますよ。⇒手前味噌）

（※ babel-plugin-macrosは、コンパイル時のコード変換に関するBabel Pluginです。今度別記事にまとめてみようかと思っています ⇒ まとめました）

どうやらtwin.macroというものが出ている模様で、きちんとメンテナンスされてそうなのはこちらになりそうです。時間を見つけて、更新しようと思います。

CSS-in-JSのライブラリで、styled-componentなどに影響を受けています。

詳しくは、こちらの記事がおすすめです。

これらを組み合わせると、

import styled from "@emotion/styled"
import tw from "tailwind.macro"

const Button = styled.button`
  ${tw`bg-blue-500 px-5`}
`

twはbabel-plugin-macrosによってコンパイルされます。

ではインストールしていきましょう。

babel-plugin-macrosを利用する上で必要になります。

npm install --save-dev babel-plugin-macros

{
  "plugins": ["macros"]
}

これら導入についての詳細は、こちらにあります。

さらに、GatsbyJS や Create React App を使っている場合は、必要ありません。

まず、NPMパッケージのインストールです。

npm install --save tailwindcss tailwind.macro@next @emotion/core @emotion/styled

※ 2020/02/15日時点で、最新のTailwindCSSとtailwind.macroを組み合わせるには、*tailwind.macro@*nextが必要です。

TailwindCSSを初期化します。

npx tailwindcss init

これで、tailwindcss.config.jsというファイルがルートフォルダにできます。

あとは使うだけです！

※ このマクロだけだとTailwindCSSのcss resetなどのベーススタイルは効かないので、必要に応じて

@tailwind base;
@tailwind components;

を作って、読み込んでおきましょう。

ちなみに.containerクラスを使わないなら、@tailwind componentsも不要になります。

これらのライブラリを初期に導入しておくことの嬉しさは、

この２つの性質を兼ね備えていることです。

導入・実装が恐ろしく速いです。

初期開発では、スピードが命でしょうから、素早いに越したことはないです。

これら２つはアジリティが求められる現代の開発に、最適であることは言うまでもないでしょう。

後のコストも含めた ROI まで考えて作る

そんな開発者としての「エチケット」を、強力にサポートしてくれるライブラリの紹介でした。