Zenn
🐡

Vite+React+TailwindCSS　セットアップ

2022/09/05に公開
React
Tailwind CSS
Vite
tech

自分の勉強がてらと、今後も迷ってセットアップに時間がかからないようにするために残しておきます！

目次

  • Viteでプロジェクトを作成(今回はReact＋TS)
  • TailwindCSSの導入

Viteでプロジェクトのセットアップ

command
yarn create vite --template

会話形式で進めていきます。
reactを選んだら、react-tsを選択します。

これでViteでReactのプロジェクトのセットアップが完了しました。

(とてもはやいですね。エコシステムに感謝しまくりです！)

TailwindCSSの導入

基本は公式どおりにやっていきます。

yarn add --dev tailwindcss postcss autoprefixer

※本番環境でも使用する場合は、yarn add tailwindcss postcss autoprefixer

yarn tailwindcss init -p

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の導入も終わりです

はやすぎる

あとは

yarn dev

をして、

<p className="font-bold">Hello World</p>

これで変われば、完了です！！

Discussion