Help us understand the problem. What is going on with this article?

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のリリースに合わせて改善できる点があればこの記事を編集するか別記事で紹介すると思います。

crunchtimer
AI開発情報を発信しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした