tailwindcss/typographyを上書きする方法

こんにちは、たわらです。

ある記事で、a タグの長い英文字が親要素をはみ出てしまい、画面レイアウトが崩れていました。 それに気づいて他記事を確認すると、p タグ、li タグでも同様の問題を発見しました。

英文字テキストを要素内で折り返す方法を調べてみると、該当タグに css でword-break: break-allを 当てればいいことがわかりました。

で、実際に@tailwindcss/typography を下記のコードを記述して上書きしました！

// tailwind.config.js
module.exports = {
  // 省略
  theme: {
    extend: {
      // ↓ココから追記
      typography: {
        DEFAULT: {
          css: {
            a: {
              wordBreak: 'break-all',
            },
            p: {
              wordBreak: 'break-all',
            },
            li: {
              wordBreak: 'break-all',
            },
          },
        },
      },
      // ↑ココまで追記
    },
  },
  plugins: [require('@tailwindcss/typography')],
};

上書きは公式のこちら を参照。

css の記述に少しハマりました。CSS-in-JS syntax でないといけません。キーはキャメルケースで値は''で囲う。 こちらを参照。

ちなみに、@tailwindcss/typographyの style はこちらで確認できますので、ご参考に。

参考文献

tailwindcss の break-words で改行しなくてハマった話

HTML/CSS ｜スペース/タブ/改行(word-break, overflow-wrap) - わくわく Bank

（了）