フロントエンドカンファレンス関西2025
レギュラートーク（30分）
フレームワーク・ライブラリ
HTML/CSS
JavaScript（TypeScript）
Web ComponentsとTailwind CSSの併用が難しい理由を少し深掘りしてみた
亀山 創樹
so_kameyama
コンポーネント指向のモダンWeb開発において、Web ComponentsとTailwind CSSは非常に魅力的な技術として注目されています。
Web Componentsは標準仕様に基づく再利用可能なコンポーネントを提供し、Tailwind CSSはユーティリティファーストで高速なUIスタイリングを実現します。一見すると、「カプセル化されたコンポーネント」と「手軽なユーティリティクラス」の組み合わせは理想的に思えるでしょう。しかし実際に開発を進めると、予想外の問題に直面します。
今回のトークでは具体的なコード例を交えながら、なぜTailwindのクラスがWeb Componentsで効かないのか、回避策の限界はどこにあるのかを明らかにし、なぜ両者の併用を避けるべきなのかという結論に至る理由を掘り下げていきます。