Tailwind CSS v4.0 を触ってみよう
CSS Native という素敵な響きに惹かれ、ちょっと早めに Tailwind CSS v4.0 を触ってみることにしました。
Vite と Tailwind CSS だけの簡単なプロジェクトを作る方法は下記のとおり。 まずはプロジェクトを作りたい階層に cd で移動して、
npm create vite
ここで
? Project name:
と訊かれる。デフォルトでは vite-project になってる。任意のプロジェクト名を入力して return。
Vanilla を選択して return。
JavaScriptを選択して return。
ここまでやったら、プロジェクトフォルダに移動して
npm install npm run dev
してみます。
➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help
とか出てくるので http://localhost:5173/ をブラウザで開きます。
見たことのある画面！
ちなみに Vite の localhost の Port 番号がデフォルトでは 5173 なのは、
V: ローマ数字の5
I: アラビア数字の1
T: アラビア数字の7
E: アラビア数字の3
ということなんだそうです（Viteとか自分で環境作ってみるのさえ初めてなのでいろいろと初めて知る） 。
ここまでやったら、あとは オフィシャルのブログ記事 を参考に。
npm install tailwindcss@next @tailwindcss/vite@next
同階層に vite.config.js を作成して下記のコードをコピペ。
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [tailwindcss()],
})style.css の内容をぜんぶ削除して下記のコードをコピペ。1行だけだけど。
@import "tailwindcss";
これでもう Tailwind CSS v4.0 が動いています。
VS Code で Tailwind CSS IntelliSense を使いたい場合は Switch to Pre-Release Version をクリックしましょう。一度 VS Code を終了して起動したら使えるようになっています。
これがないと始められない
次のエントリーではいろいろと触ってみた感想を書く予定です！
