Create React Appでejectせずにjsx pragma無しでtwin.macroを使用してTailwind CSSを導入する

Create React Appでejectせずにjsx pragma無しでtwin.macroを使用してTailwind CSSを導入する

2021年07月25日

ReactTailwind CSS
Cra+twin.macro

はじめに

Create React Appで作成したプロジェクトにtwin.macroを導入する方法をメモしておきます。

twin.macroはTailwind CSSをcss-in-jsで記載するためのライブラリで、Tailwind CSSの良さとcss-in-jsの良さをいいとこ取りができます。

導入手順

Create React Appでプロジェクトを作成する

Create React Appを使用してReactプロジェクトを作成します。

npx create-react-app cra-twin-macro

yarnの場合

yarn create react-app cra-twin-macro

パッケージのインストール

twin.macroはstyled-componentsとemotionを使用しできるのですが今回はemotionを使用します。

$ npm install twin.macro tailwindcss @emotion/react @emotion/styled

yarnの場合

$ yarn add twin.macro tailwindcss @emotion/react @emotin/styled

Globalのスタイルを追加する

src/index.jsを以下のように修正します。

src/index.js


import React from 'react';
import ReactDOM from 'react-dom';
+import { GlobalStyles } from 'twin.macro';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
+    <GlobalStyles/>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

twin.macroの設定を追加

twin.macroの設定はbabel-plugin-macros.config.jsを作成してそこに記述するか、 package.jsonに記述する方法の2通りありますがお好きな方で大丈夫です。

twin.macroはBabelマクロを使用して実現しているのですがtwin.macro意外にBabelマクロの機能を使っていて設定を記述する必要があるならbabel-plugin-macros.config.jsとして切り出して、 そうでないならpackage.jsonに簡単に書いてしまっていいと思います。

babel-plugin-macros.config.js

module.exports = {
  twin: {
    preset: 'emotion',
  },
}

package.json

{
  ...,
  "babelMacros": {
    "twin": {
      "preset": "emotion"
    }
  }
}

jsx pragmaを自動で挿入する

上記までで以下のように記述をすることでtwin.macroを通してTailwind CSSが使用できるようになりました。

/** @jsxImportSource @emotion/react */
import tw from 'twin.macro'

const Input = () => <input tw="bg-black" />
// or
const Input = () => <input css={tw`bg-black`} />

この状態だとtwin.macroを使用する箇所で以下のjsx pragmaを挿入する必要があり少し面倒臭いです。

/** @jsxImportSource @emotion/react */ // ←この部分がjsx pragma
import tw from 'twin.macro'
or
/** @jsxImportSource @emotion/react */ // ←この部分がjsx pragma
import 'twin.macro'

なので設定を追加して自動でjsx pragmaが挿入されるように修正します。

jsx pragmaが自動挿入されるようにするにはBabelの設定を追加する必要があるのですが、Create React Appを使用している場合はそのままでは設定を追加できませんので、 今回はcracoを用いてこちらを解消していきます。ついでにimport 'twin.macro'するのも面倒なのでこちらも記述しないでいいようにします。

追加のパッケージのインストール

npmの場合

$ npm install -D @craco/craco @emotion/babel-plugin-jsx-pragmatic babel-plugin-twin

Babelの設定を追加

cracoを通して以下のようにBabelの設定を追加します。

craco.config.js

module.exports = {
  babel: {
    plugins: [
      "babel-plugin-twin",
      "babel-plugin-macros",
      [
        "@emotion/babel-plugin-jsx-pragmatic",
        {
          export: "jsx",
          import: "__cssprop",
          module: "@emotion/react"
        }
      ],
      [
        "@babel/plugin-transform-react-jsx",
        {
          pragma: "__cssprop",
          pragmaFrag: "React.Fragment"
        }
      ]
    ]
  }
};

package.jsonを修正

craco経由でReactアプリを動かすように修正します。

{
  ...,
  "scripts": {
-    "start": "react-scripts start",
+    "start": "craco start",
-    "build": "react-scripts build",
+    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

これでtwin.macroの凄さを体感できます。

おわりに

手軽に始めるならCreate React Appが良いのですが、色々入れるとなると自分で修正をしないといけなくて、 どっちもどっちなのでCreate React Appのカスタムテンプレートを作成するのもありかなと思いました。

ホーム記事一覧プライバシーポリシーお問い合わせ
© 2021 luku.work