1. はじめに
  2. Vite の使用

インストール

Tailwind CSS を始めましょう

Tailwind CSS は、すべての HTML ファイル、JavaScript コンポーネント、およびその他のテンプレートをスキャンしてクラス名を検出し、対応するスタイルを生成して静的な CSS ファイルに書き込むことによって機能します。

高速、柔軟、そして信頼性があり、ランタイムはゼロです。

Tailwind CSS を Vite プラグインとしてインストールする

Tailwind CSS を Vite プラグインとしてインストールすることは、Laravel、SvelteKit、React Router、Nuxt、SolidJS などのフレームワークと統合する最もシームレスな方法です。

01

Tailwind CSS をインストール

`tailwindcss` と `@tailwindcss/vite` を npm 経由でインストールします。

ターミナル
npm install tailwindcss @tailwindcss/vite
02

Vite プラグインを設定する

`@tailwindcss/vite` プラグインを Vite 設定に追加します。

vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})
03

Tailwind CSS をインポート

Tailwind CSS をインポートする `@import` を CSS ファイルに追加します。

CSS
@import "tailwindcss";
04

ビルドプロセスを開始する

`npm run dev` または `package.json` ファイルで設定されている任意のコマンドでビルドプロセスを実行します。 `package.json` ファイル。

ターミナル
npm run dev
05

HTML で Tailwind の使用を開始する

コンパイルされた CSS が `<head>` に含まれていることを確認し(フレームワークがこれを処理してくれる場合があります)、Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。

HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/styles.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
行き詰まっていますか? Vite での Tailwind のセットアップは、ビルドツールによって少し異なる場合があります。フレームワークガイドを確認して、特定のセットアップに関するより具体的な手順があるかどうかを確認してください。
Copyright © 2025 Tailwind Labs Inc.·商標ポリシー