Tailwind CSS v4 Setup Guide
CODE PREVIEW
Prompt
Create a step-by-step guide for setting up Tailwind CSS v4 in a project. Include key changes like the new @tailwind directive, installation methods (npm, CDN, CLI), and configuration in vite. Show a simple responsive example.
Tailwind CSS v4では、セットアップがよりシンプルになりました。@import "tailwindcss";という1行で従来の複数の@tailwindディレクティブを置き換えます。最新のアルファ版をnpmでインストール：npm install tailwindcss@next @tailwindcss/vite。他のバンドラーの場合は、Tailwind CLIまたは公式CDN（https://cdn.tailwindcss.com）を使用します。設定はCSSベースの@themeディレクティブで管理され、tailwind.config.jsは不要です。grid-cols-1 md:grid-cols-3のようなレスポンシブユーティリティですぐに構築を始められます。
Prompt Overview
Tailwind CSS v4 introduces a streamlined setup with a single @import "tailwindcss"; directive, replacing the old @tailwind directives. Install the latest alpha via npm: npm install tailwindcss@next @tailwindcss/vite. For other bundlers, use the Tailwind CLI or official CDN (https://cdn.tailwindcss.com). Configuration is now driven by CSS-based @theme directives—no tailwind.config.js required. Start building immediately with responsive utilities like grid-cols-1 md:grid-cols-3.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選