Open2023/05/24にコメント追加5

unocssで色々試す

Shadow DOMで使う（with tailwind preset）

vite.config.ts

export default defineConfig({
  plugins: [react(), UnoCSS({ mode: 'shadow-dom' })],
});

uno.config.ts

import { defineConfig, presetUno } from 'unocss';

export default defineConfig({
  presets: [presetUno()],
});

import tailwindResetCss from '@unocss/reset/tailwind.css?inline';

export default function Component() {
  return (
    <>
      <style>{tailwindResetCss}</style>
      <style>{`@unocss-placeholder`}</style>
      <p className="m-3"></p>
    </>
  )
}

一応これでいけた、、

tailwindベースのフレームワーク（daisyやflowbite）をshadow DOMで使うのは現状厳しそう。

これらはグローバルに定義されている前提の --tw CSS変数を参照しているが、 ↑の方法だとこの定義はない。

軽く触った程度の所感だが、tailwindと比較してみて

pros

高いカスタマイズ性（presetやrulesで拡張が容易）
shadow dom対応

cons

フレームワークは現状ほぼない（ポートはあるが）ので、手軽にUIを作るプロジェクトでは不向き
intelisenseが弱い

たとえばUIをしっかりデザイン出来る、デザインシステムを定義出来るようなプロダクトとかは、unocssが向いてると思う（とはいえまだdxが弱いので改善次第）
個人開発とか簡単なプロジェクトはtailwindの方が現状は良いと思う。

訂正

intelisenseが弱い

VSCode拡張を入れたら十分問題なかった

	tailwind	uno
独自ルールの追加	△	◯
コード補完	◯	◯
確立したUIフレームワークがあるか	◯	✗