Open5

unocssで色々試す

bisquit_devbisquit_dev

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>
    </>
  )
}

一応これでいけた、、

bisquit_devbisquit_dev

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

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

bisquit_devbisquit_dev

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

pros

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

cons

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

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

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