Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

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
7
Help us understand the problem. What are the problem?