Vite + ReactJsとTailwind CSSのセットアップ

Vite + ReactJsとTailwind CSSのセットアップのカバー画像

はじめに

我々開発者はいつも物事を最適化しようとしますよね！そのために、開発の速さとパフォーマンスの点で、この組み合わせ（Vite + React + Tailwind）が開発者の間で人気を集めています。

この記事では、Vite + ReactプロジェクトにTailwindをセットアップする方法を学びます。

わくわくしますよね？

私もです!!!

それでは、これ以上遅れることなく、始めましょう!!

手順

ステップ1

まず、ターミナルを開き、プロジェクトフォルダを作成したいディレクトリを選びます。この場合、デスクトップディレクトリを選びます。

そのために、ターミナルで cd Desktop を実行します。

ステップ2

次に、ターミナルで以下のコマンドを実行して、デスクトップにプロジェクトフォルダを作成します:

npm create vite@latest project-name -- --template react

💡
project-name をあなたのプロジェクト名に変更してください。

ここではプロジェクト名をDemo projectとします。

よって私たちのコマンドは:

npm create vite@latest demo-project -- --template react

になります。

このコマンドでプロジェクトフォルダが作成されます。

💡
注: ここでの --template react は、ReactアプリをViteで作成していることを指定しています。

ステップ3

プロジェクトフォルダを作成したら、そこに移動しましょう。

そのためには

cd demo-project

を実行します。

ステップ4

次に、TailwindCssおよび必要な依存関係をダウンロードします。

以下のコマンドを実行してください:

npm install -D tailwindcss postcss autoprefixer

このコマンドはTailwind CSSフレームワーク、post-Css、そしてpost-Cssフレームワークのautoprefixerをインストールします。

プロジェクトにこれらの依存関係が正常にインストールされたことを確認するには、package.jsonをチェックしてください。次のように表示されるはずです:

ステップ5

この後、tailwindの設定ファイルを生成します。

以下のコマンドを実行してください:

npx tailwindcss init -p

このコマンドにより、tailwind.config.js および postcss.config.js の設定ファイルが生成されます。

ステップ6

次に、tailwind.config.js ファイルの中のcontentセクションに、あなたのテンプレートファイルへのパスを追加します。テンプレートファイルにはHTMLテンプレート、JavaScriptコンポーネント、およびTailwindクラス名を含むその他のソースファイルが含まれます。

これにより、プロジェクト全体にTailwindクラスが適用されます。

それを行うには、次のコードを tailwind.config.js ファイルのcontentセクションに追加します:

"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",

すると、ファイルは次のようになります:

ステップ7

Tailwindをプロジェクトにセットアップしたので、次はプロジェクトにTailwindディレクティブを追加します。

Tailwindディレクティブについての詳細は、このページをチェックしてください。

index.cssにtailwindディレクティブを追加します:

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

💡
フォルダにはいくつかのデフォルトスタイルが追加されています。それらを削除して自分のスタイルを追加してください。さもなければ混乱を招くかもしれません。

ステップ8

ほぼ完成です!!

次に、以下のコードを実行してViteサーバーを起動します:

npm run dev

これによりlocalhostへのリンクが開きます。

リンクにアクセスすると、次のようなものが見えるはずです:

デフォルトのCSSスタイルをまだ削除していないため、このようになっています。

最終ステップ

このステップでは、ViteとTailwind CSSがうまく連携して動作することを確認します。App.jsx ファイルに移動して、以下のコードを記述してください:

import { useState } from 'react'
const App = () => {
    return (
        <div className="App">
            <h1 className="text-3xl text-center font-bold underline">
                こんにちは、世界！
            </h1>
        </div>
        )
}
export default App

そして、次のような出力が得られます:

さて!!

準備は整いました！

それでは、あなたの夢のプロジェクトを構築し始めましょう!!

結論

このブログ投稿が役に立つと感じたら、他の人にも共有して利益をもたらすことを検討してください。Javascriptやその他のWeb開発トピックに関するより多くのコンテンツについては、私をフォローしてください。

私の作業をスポンサーするには、Arindam's Sponsor Page を訪れてさまざまなスポンサーシップオプションをご覧ください。

Twitter、LinkedIn、Youtube 、GitHub で私とつながってください。

読んでいただきありがとうございます :)

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/arindam_1729/setup-vite-reactjs-with-tailwind-css-4dj2