概要

Astro に Tailwind CSS を導入するとデフォルトのマークダウンの HTML 変換処理が行われず、 #や-といったスタイルが適用されなくなった。 結構時間取られてしまったのだが、実際はとても簡単な問題だった。

解決

tailwind の html 変換処理を行うプラグインのインストール

https://tailwindcss.com/docs/typography-plugin

npm からプラグインをインストールします。

npm install -D @tailwindcss/typography

次に、プラグインを tailwind.config.js ファイルに追加します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}