Mateial UI も tailwind CSS も使いたい？そんなあなたに『Material Tailwind』がおすすめ

React 作成日：2022.08.24

tailwind CSS はReactととても相性が良いです。一方で、tailwind CSSはコンポーネントなどを持たないため、アイコンやタブやカードやナビなどコンポーネントをイチから用意する必要があります。

用意されたアイコンやタブやカードやナビなどのコンポーネントを使いたい場合は、Material UIが１つの選択肢になります。

Material UI のコンポーネントも使いつつ、tailwind CSSでスタイリングしたい。
そんなあなたに Material Tailwind がおすすめです。

Material Tailwind とは
React への導入方法
- React に tailwind CSSを導入する
- Material Tailwind を導入する
Material Taliwindのつかいかた
まとめ

Material Tailwind とは

tailwind css ベースのMaterial UI準拠のコンポーネントが使えるのが Material Tailwind です。Material UI も tailwind CSS もどちらも使いたい場合は、非常に便利なモジュールです。

www.material-tailwind.com

Material Tailwind - Easy-to-use Tailwind CSS components library with Material...

https://www.material-tailwind.com

Material Tailwind is a components library that features multiple React & HTML components, all written with Tailwind CSS classes and Material Design guidelines.

React への導入方法

基本的には、以下の公式サイトの案内に従って進めていけばOKです。

www.material-tailwind.com

Create React App - Installation Guide

https://www.material-tailwind.com/docs/react/guide/cra

Learn how to use Material Tailwind components with Create React App and Tailwind CSS to easily create elegant and flexible pages.

大まかな手順は以下の通りです。

Reactプロジェクトを作成
tailwind CSSを導入
Material Tailwindを導入

React に tailwind CSSを導入する

まず、create-react-app でプロジェクトを生成してから、tailwind css をインストール・セットアップします。セットアップ方法は、以下の記事を参照してください。

Material Tailwind を導入する

tailwind css の導入が完了後に、Material Tailwind の導入を進めます。
npmを使用している場合、以下のコマンドでインストールします。

npm i @material-tailwind/react

その後、configファイルを以下のように修正します。

const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

これで準備は完了です。

Material Taliwindのつかいかた

ボタンを使う場合は、以下のように Material UI と Tailwind CSS の記述をそのまま使えばOKです。Material UIのコンポーネントを使いつつ、スタイルのカスタマイズは tailwind CSS でできます。

import { Button } from "@material-tailwind/react";
 
export default function Buttons() {
  return (
    <div className="flex w-max gap-4">
          <Button>Button</Button>
          <Button color="green" className="text-xl text-yellow-500">Button</Button>
    </div>
  );
}