Vite + Tailwind CSSでペライチHTMLをマークアップする

はじめに つい最近、ReactもVueも使わずに静的なペライチHTMLのマークアップを行う必要に迫られました。その際ViteのVanilla[1]テンプレートとTailwindを使った環境でマークアップをしたところ非常に快適だったので、環境構築の手順を記事にしておこうと思いました。 Viteを使う理由 ViteというとVueやReactの開発ツールと思われがちですが、UIライブラリに依存しないVanillaテンプレートが用意されています。 ファイルの更新を検知してブラウザへの反映といった基本的な機能に加えて、PostCSSのサポートもあるのでTailwindでの開発と相性が良いです。 セットアップ Viteでプロジェクトを立ち上げる普段の手順に加えて、Tailwindのセットアップを行います。 npm create vite@latest # project名を入力後、フレームワークでは「

[Finding]

ペライチ作ってるよ…その世界線が羨ましい / とは言えVite+Tailwindの構成はやってみたい

[h_taiji]

つかう

[yarumato]

“ReactもVueも使わずに静的なペライチHTMLのマークアップを行う。Viteは、UIライブラリ（VueやReact）に依存しないVanillaテンプレートも用意。Tailwindでの開発と相性が良い。この環境でマークアップして快適だった”