Tailwindcss導入

はじめに

React + Typescript + Viteの環境でのTailwindcssのセットアップ情報は割とありますが、Javascriptの場合があまりなかったので、備忘録がてら記事にします。

手順

ライブラリのインストールと初期化を以下コマンドで行います。

npm install tailwindcss@3 @tailwindcss/postcss postcss
npx tailwindcss init -p

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
});

index.css

@import "tailwindcss";

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

App.jsx

const App = () => {
  return (
    <div className="flex items-center justify-center h-screen bg-blue-500">
      <h1 className="text-white text-4xl font-bold">Hello, Tailwind CSS!</h1>
    </div>
  );
};
export default App;

以下コマンでローカルサーバを立ち上げます。

npm run dev

上記のような表記になっていれば、OK!

参考文献

Get started with Tailwind CSS
【Tailwind CSS】Vite×React×TypeScriptにおける環境構築方法