[筆記] wangEditor 5 搭配 Tailwindcss 4 的樣式衝突問題

wangEditor 5 的繼任者 wangEditor-next 是基於 wangEditor 5 的維護版本,不過一旦搭配 Tailwindcss 就會有樣式衝突的問題。這邊筆記下解決方法。
notes-wangeditor-5-base-preflight-tailwindcss-4-conflict-1


內容

[ wangEditor-next ]:https://wangeditor-next.github.io/docs/

遇上 Tailwindcss 的預設 Preflight,便會使編輯器內的樣式受到影響。雖說 Tailwindcss 可透過關閉 preflight 來避免影響,但這又導致依賴 Tailwindcss 所撰寫的樣式跑版。

如何關閉 Preflight

Tailwindcss 3

https://v3.tailwindcss.com/docs/preflight#disabling-preflight 在 tailwind.config.js 中調整

Tailwindcss 4

https://tailwindcss.com/docs/preflight#disabling-preflight 不使用 @import “tailwindcss/preflight.css” layer(base);

避免樣式衝突

透過 AI 工具協助比對 Tailwindcss Preflight 和 wangEditor 的 css,並告知以 wangEditor 為主。以下會被影響到的 css,都被加上 !important


參考資料

1. wangEditor-next 开源 Web 富文本编辑器,开箱即用,配置简单
2. [v4] Cannot disable preflight styles

按讚加入粉絲團

延伸閱讀