86688
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/XyJax-v3@3.0.1/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>
    
```
CC BY-SA 4.0
2022-03-04T08:48:35.987
86681
2022-03-04T13:37:50.360
51682
question
mathjax tailwindcss
tailwind.css を読み込むと XyJax の表示が崩れる
Tailwind CSS はベーススタイルの中で、置換要素の `display` プロパティおよび `vertical-align`
プロパティの値を、それぞれ `block` と `middle` に変更しています。この変更点が動的に生成された `svg`
要素に影響し、文字のずれを生じさせています。このため、これらの値を初期値に戻すことで、問題の現象は解決します。

```

    svg {
      display: inline !important;
      vertical-align: baseline !important;
    }
```

```

    <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/XyJax-v3@3.0.1/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>
```

* * *

蛇足ですが、これらのベーススタイルは以下のような理由から加えられました[[1]](https://tailwindcss.com/docs/preflight#images-
are-block-level)。

  1. `display: block`：ほとんどの置換要素はブロックレベルのほうが都合がよいため。たとえば、`img` 要素は行の中で使うことはほとんどないため、基本的にブロックレベルとして扱えるほうが理にかなっている。さらにブロックレベルでは、インラインレベルで生じる予期しない配置を防ぐことができる。`img` 要素を例にすると、インラインレベルではベースラインによる余白が生じるが、ブロックレベルであれば生じない。
  2. `vertical-align: middle`：置換要素がインラインレベルに変更された場合でも、より好ましいと期待される配置にするため。前述のベースラインによる余白もこのスタイルによって生じなくなる。
CC BY-SA 4.0
2022-03-04T13:37:50.360
86688
2022-03-04T13:37:50.360
32986
86681
answer