styled-componentsの中でTailwind CSSのクラスを使えるようになるtailwind.macroの紹介

はじめに

タイトル通り、styled-componentsの中でTailwind CSSのクラスを使えるようになるtailwind.macroの紹介です。

環境

• tailwindcss v1.3.5
• styled-components v5.1.0

#導入方法
Tailwind CSSとstyled-componentsの導入を前提にします。

tailwind.macroを導入してstyled-components内でtailwind CSSを使用できるようにします。
とりあえずパッケージのインストール

npm install --save-dev babel-plugin-macros tailwind.macro

または

yarn add -D babel-plugin-macros tailwind.macro

ここで注意ですが、2020/4/28現在、Tailwind CSSの最新バージョンを使用する場合はv1.0.0-alpha.10を使用しないといけません。
https://github.com/bradlc/babel-plugin-tailwind-components/releases/tag/v1.0.0-alpha.2

なので、以下のコマンドを実行します。

npm install --save-dev tailwind.macro@next

または

yarn add -D tailwind.macro@next

tailwind.macroはbabelのプラグインなので.babelrcに以下を追加

.babelrc

{
  "plugins": ["macros"]
}

これで導入が完了したので、次のような構文でstyled-components内でTailwind CSSを使用することができます。これによりTailwind CSSのクラスを擬似要素内で書くこと等ができるようになったりと表現の自由度が高まります。

button.tsx

import styled from 'styled-components'
import tw from 'tailwind.macro'

const Button = styled('button')`
  ${tw`font-mono text-sm text-red hover:text-blue`};
`

ハマった点

開発時にStorybookを使用しているのですが、rootにtailwind.config,jsを置いていた時にtailwind.config,jsを読み込めないエラーが発生してハマりました。
原因はStorybookで@storybook/preset-create-react-appを使用している時にsrc配下しか読み込めないことでした。仕方ないのでsrc配下にtailwind.config,jsを移動し、babel-plugin-macros.config.jsを作りパスを指定してやることで一旦回避しました。

babel-plugin-macros.config.js

module.exports = {
  tailwind: {
    config: './src/tailwind.config.js',
    format: 'auto',
  },
};

Storybook v6.0ではsrcや.storybookディレクトリ内に記述しなければいけない制限がなくなるようなので、リリースを待ってリファクタをしようと思います。

#まとめ
styled-componentsの中でTailwind CSSのクラスを使えるようになるtailwind.macroの紹介をしました。Storybook v6.0のリリースに合わせて改善できる点があればこの記事を編集するか別記事で紹介すると思います。