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 を終了して起動したら使えるようになっています。


これがないと始められない

次のエントリーではいろいろと触ってみた感想を書く予定です!


この記事をシェアする

この記事を書いた人

有限会社 アップルップル

admin

このブログでは a-blog cms の実装に関することを中心に、CSS、JavaScriptなどフロントエンド周辺のことを書いていきます。

おすすめ記事

この記事のハッシュタグ から関連する記事を表示しています。

タグ一覧