はじめに
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-macroyarnの場合
yarn create react-app cra-twin-macroパッケージのインストール
twin.macroはstyled-componentsとemotionを使用しできるのですが今回はemotionを使用します。
$ npm install twin.macro tailwindcss @emotion/react @emotion/styledyarnの場合
$ yarn add twin.macro tailwindcss @emotion/react @emotin/styledGlobalのスタイルを追加する
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-twinBabelの設定を追加
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のカスタムテンプレートを作成するのもありかなと思いました。