- Viteのセットアップ まず、Viteプロジェクトをセットアップする必要があります。ViteはNode.jsを必要とするので、Node.jsがインストールされていることを確認してください。Viteをインストールし、新しいプロジェクトを作成します。
npm init vite@latest my-project
cd my-project
npm install- Tailwind CSSの追加 次に、Tailwind CSSをプロジェクトに追加します。以下のコマンドを使用してTailwind CSSと関連する依存関係をインストールします。
npm install tailwindcss postcss autoprefixer- Tailwind CSSの設定 Tailwind CSSの設定ファイルを作成します。以下のコマンドを使用して設定ファイルを生成します。
npx tailwindcss init生成されたtailwind.config.jsファイルを編集し、必要なスタイルやプラグインを追加します。
- Viteの設定
Viteの設定ファイル(
vite.config.js)を編集して、Tailwind CSSを有効にします。
// vite.config.js
const { defineConfig } = require('vite')
const tailwindcss = require('tailwindcss')
module.exports = defineConfig({
plugins: [
tailwindcss('./tailwind.config.js'),
],
})- スタイルの適用 Tailwind CSSのスタイルをHTMLファイルに適用するために、以下の手順を実行します。
index.htmlファイルにTailwind CSSのクラスを使用してスタイルを適用します。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/dist/style.css">
</head>
<body class="bg-gray-100">
<h1 class="text-4xl font-bold text-center">Hello, Vite + Tailwind CSS!</h1>
</body>
</html>- 開発サーバーの起動 Viteの開発サーバーを起動して、変更をリアルタイムに反映させることができます。
npm run devこれで、ViteとTailwind CSSを組み合わせたウェブ開発の基本的なセットアップが完了しました。この組み合わせを使用することで、高速かつ効率的なウェブアプリケーションを開発することができます。
この記事では、さらに多くのViteとTailwind CSSの機能やテクニックについて説明していく予定です。例えば、Viteのプラグインやビルドオプションの活用、Tailwind CSSのカスタマイズ方法などがあります。