🚀

TailwindCSSのPreflightの適用範囲を限定する方法

に公開
React
TypeScript
Tailwind CSS
kintone
tech

はじめに

あるSaaSのJavaScriptカスタマイズ等でTailwindCSSを利用する場合、TailwindCSSのリセットCSSであるPreflightが既存のUIを破壊する場合が割とよくある。

しかし、Preflightなしでは注入するReactコンポーネント等のレイアウトが崩れる場合がある。

そこで、Preflightの適用範囲を限定することで、この問題を解決できると考える。

結論

https://j5cookie.medium.com/scoping-tailwindcss-preflight-for-injected-apps-c30152f6dd8d

上記リンクの通り、以下のようにするだけだ。

変更前

@import 'tailwindcss';

変更後

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
#extension-root {
  @import "tailwindcss/preflight.css" layer(base);
}
@import "tailwindcss/utilities.css" layer(utilities);

終わりに

自分用のメモなので大して書くこともないのだが、この知識はkintoneに既存のUIを破壊することなくTailwindCSSベースのReactコンポーネントを注入する際に役に立つ。

Discussion