🐤

React + Vite + Tailwind CSS

2025/01/09に公開

この記事は、エンジニア初心者の筆者が、自身の学びを記録するためにまとめたものです。今回はReact + Viteの場合のTailwind CSS セットアップ手順をまとめています。十分調べて執筆していますが、万が一内容に誤りがありましたら、何卒ご容赦ください。

Tailwind CSS関連パッケージをインストール

npm install -D tailwindcss postcss autoprefixer

Vite は PostCSSを内部で使用しているため、これらのパッケージが必要です。
・postcss：Vite の CSS 処理に必要。
・autoprefixer：CSS に必要なベンダープレフィックスを付与。

npx tailwindcss init -p

これで以下の2つのファイルが生成されます
・tailwind.config.js：Tailwind の設定ファイル。
・postcss.config.js：ViteがTailwind CSSを認識するためのPostCSS 設定。

tailwind.config.js

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

content: [],に適応させたいファイルを指定します。
例
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

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

例えばApp.tsxをこのように編集してみます。

App.tsx

<h1 className="text-5xl text-blue-500 font-bold ">Hello React</h1>

↓↓↓↓↓↓↓↓↓↓↓↓↓↓

成功しています。
これで設定は終了です。