# SafariでTailwindの`break-words`を使うとレイアウトがぶっ壊れる問題について 🧭

Tailwind CSS: v3.4.16
ブラウザ: Safari Version 17.5

Posted at 2025-02-23

環境

Safariでは、break-wordsクラスを適用してもbreak-normalと変化がなく、単語が正しく折り返されません。また単語が折り返されず改行が行われないため下記のようにレイアウトがぶっ壊れてしまいます。

Safari特有のレンダリングバグのようで、ウィンドウリサイズ時やクラスのオンオフで一時的に正常な動作が確認されるものの、根本的な問題はWebKit側の不具合らしいです。

以下のCSSを適用することで、Safariでも期待通りの挙動を実現できます。
単語ごとに改行せず、normalで改行させるようにしました。

@supports (-webkit-touch-callout: none) {
  .break-words {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

これのせいで位置時間悩みましｔ