ReactでTailwindCSS / HeadlessUI / Heroicons の使うときの初期設定まとめ

TailwindCSS / HeadlessUI / Heroiconsは、React案件ととても相性がよく、効率的に開発を行うことができます。

というわけで、毎回初期設定が面倒なのでまとめておきました。

TailWindCSS / HeadlessUI / Heroicons とは

TailwindCSS

flex、pt-4、text-center、rotate-90のようなクラスが詰まったユーティリティファーストのCSSフレームワーク。マークアップの中で直接、あらゆるデザインを構築できるのが特長です。ReactやVueとの相性抜群。反面WordPressなんかにはまったく向いていないのでご注意ください。（筆者経験談）

HeadlessUI

セレクトボックスやトグルスイッチ、モーダルウインドウなどの、機能部分だけをスタイルなしで提供するUIコンポーネント。Tailwind CSSと美しく統合するように設計されています。

Heroicons

TailwindCSS開発者による、手作りの美しいSVGアイコンセット。

Reactプロジェクトの作成

まずはReactプロジェクトを作成します。

npx create-react-app my-project
cd my-project

TailwindCSSのインストールと設定

TailwindCSSをインストールして初期化。プロジェクト直下に tailwind.config.js が作成されます。

yarn add -D tailwindcss
npx tailwindcss init

tailwind.config.jsをこんな感じで記述しておきます。

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

index.cssにこのように書いておきます。

@tailwind base;
@tailwind components;
@tailwind utilities;

これでTailwindCSSが使えるようになります。

HeadlessUIのインストール

HeadlessUIをインストールします。

yarn add @headlessui/react

@headlessui-tailwindcss プラグインのインストール

HeadlessUIの状態別スタイルをTailwindCSSで記述できるようにするプラグイン。入れておくと便利です。

ui-open:* や ui-active:* のようなクラス名が使えるようになります。

yarn add @headlessui/tailwindcss

tailwind.config.jsのpluginsに下記を追記します。

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@headlessui/tailwindcss') // これを追加
  ],
}

Heroiconsのインストールと使い方

yarn add @heroicons/react

使い方

import { BeakerIcon } from '@heroicons/react/24/outline' // 24x24, 1.5px stroke
import { BeakerIcon } from '@heroicons/react/24/solid' // 24x24, Solid fill
import { BeakerIcon } from '@heroicons/react/20/solid' // 20x20 Solid fill

<BeakerIcon className="w-5 h-5" />

忙しい人のためのインストール

yarn add -D tailwindcss
yarn add @headlessui/react @headlessui/tailwindcss @heroicons/react
echo "module.exports = {
  content: [
    \"./src/**/*.{js,jsx,ts,tsx}\",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@headlessui/tailwindcss')
  ],
}" > tailwind.config.js