Next.js + Tailwind + MathJax で数式を表示できるウェブサイトを作成しています。MathJax による数式表示は問題なく行えるのですが、その延長線上で XyJax を利用して図式を描こうとすると文字と線の位置がずれてしまいます。tailwind.css の読み込みをやめれば正しく表示されるのですが、CSS を読み込むだけで副作用が起きる原因が分からず質問させていただきました。問題を再現できる最小限のコードを添付しています。Tailwind の使用を止めるのは最終手段にしたいと考えています。原因や解決策が分かる方がいればお願いいたします。
<body>
\begin{xy}
\xymatrix{G \ar[d]_\pi \ar[r]^\phi & H \\G/\operatorname{Ker}\,\phi \ar@{.>}[ur]_\psi}
\end{xy}
<script>
MathJax = {
loader: {load: ['[custom]/xypic.js'],
paths: {custom:'https://cdn.jsdelivr.net/gh/sonoisa/[email protected]/build/'}},
tex: {
packages: { '[+]': ['xypic'] }
}
};
</script>
<script id="MathJax-script"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-chtml.min.js?config=TeX-AMS_HTML">
</script>
<script src="https://cdn.tailwindcss.com"></script> <!--この行を消すと正しく表示される-->
</body>