create-react-app でTailwind CSS を使う

環境

• OS: Window 10
• Node.js: v16.16.0

手順

• create-react-app でプロジェクトを作成する

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

• Tailwind CSS と依存関係のモジュールをインストールする
  • PostCSS とは、JSプラグインでスタイルを変換するためのツール
  • Autoprefixer とは、ベンダープレフィックスを自動で付けるツール

npm install -D tailwindcss postcss autoprefixer

• initコマンドを実行してtailwind.config.js とpostcss.config.js を生成する
  • tailwind.config.js はTailwind CSS の設定ファイル
  • postcss.config.js はPostCSS の設定ファイル

npx tailwindcss init -p

tailwind.config.js

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

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

• tailwind.config.js を修正する
  • src以下の、すべてのテンプレートファイルのパスを追加する

tailwind.config.js

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

• CSSにTailwindのディレクティブを追加する

index.css

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

動作確認

• プロジェクトを実行

npm start

• プロジェクトでTailwind CSSを使ってみる

App.js

import React from 'react';
import './index.css';

function App() {
  return (
    <div>
      <h1 className="text-3xl font-bold underline">Hello, Tailwind CSS!</h1>
    </div>
  );
}

export default App;

こんなかんじで、フォントサイズと字の太さ、下線が適用されました～

参考文献