Open3
UnoCSSとTailwindCSSの比較メモ
koyama shigehitoPlayground
どちらも手軽に試すことのできるPlaygroundが用意されている。
共通の特徴
- share用のURL作成
- Configの設定可能
- OutputされるCSSのプレビュー
- ダークモード切り替え
Tailwind CSS
- バージョンを選択できる
- エディタの補完が効く
UnoCSS
- レスポンシブなプレビュー
koyama shigehitoエディタ支援
どちらもVS Codeの拡張機能が用意されている。
共通の特徴
- ユーティリティの装飾（カラーチップやシンタックスハイライト）
- ホバープレビュー（クラス名にカーソルを合わせると、CSSが表示される）
Tailwind CSS
- オートコンプリート
- リンティング（エラーや潜在的なバグをハイライト）
UnoCSS
JetBrains IDEもTailwindの補完をサポートしているよう。
koyama shigehitoスタイルのリセット
それぞれスタイルのリセット方法が用意されている。Tailwindはデフォルトの1択（設定でカスタムや無効化はできる）、UnoCSSは別途リセットライブラリを導入する（パッケージも用意されている）。
Tailwind CSS
Preflightという名前で用意されていて、modern-normalizeの上に構築されている。詳細は以下。
UnoCSS
デフォルトでスタイルリセットやPreflightは提供されていない。リセットライブラリが簡単に導入できるようにパッケージが用意されている。
normalize.cssやsanitize.css、TailwindのPreflightに準拠したものなどが利用できて、main.jsにインポートして使用する。
main.js
import '@unocss/reset/tailwind.css'
詳細は以下。