Reactでtailwindcssを使用する。

はじめに

reactでtailwindcssとemotionを使用していい感じにcssを適用していきたい。

方法を見つけたのでここにメモとして記述する。

ステップ１

ライブラリをインストールする

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

解説

• twin.macro
  Tailwind CSSのユーティリティクラスを直接JavaScriptファイル内で使用できるマクロ。コンポーネントの可読性が向上します。

• tailwindcss
  JSXで直接使用するためにライブラリに追加します。

• @emotion/react と @emotion/styled
  EmotionはReact用のライブラリで、CSS-in-JSを実現します。これにより、JavaScript内でCSSを動的に作成し、コンポーネントにスタイルを適用することができます。

  • @emotion/react はReactコンポーネント内でスタイルを定義し、適用するためのAPIを提供します。
  • @emotion/styled はスタイル付きコンポーネントを作成するためのライブラリです。

ステップ２

tailwindcssの設定ファイルを生成する

npx tailwindcss init

設定ファイルに記述を追加

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

解説

contentの部分にtailwindcssを使用する拡張子を設定。
私はtypeScriptを使用しているので、tsとtsxも追加しています。

ステップ3

package.jsonのbabelセクションに以下の記述を追加します。

package.json

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }, // 追加
  "babel": {
    "plugins": ["macros"]
  },

解説

今回はこの設定によりtwin.maroなどのマクロが正しく機能するようになります。

• babelセクションの必要性
  JavaScriptは頻繁に新しい機能が追加されますが、すべてのブラウザや環境がこれらの新機能を即座にサポートするわけではありません。
  Babelを使用すると、最新のJavaScript機能を使用してコードを書き、それを古いJavaScriptバージョンに変換することができます。これにより、新しい機能を活用しつつ、広範なブラウザ互換性を保持できます。

結果

 const MainComponent = tw.div`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded`;

上のようにtailwindcssを適用したコンポーネントを作成することができます。

参考