From 4c094bc3c3dedf96e88b9b8e35dd870fd76b6388 Mon Sep 17 00:00:00 2001 From: fkatsuhiro Date: Tue, 12 May 2026 08:08:24 +0900 Subject: [PATCH] docs: tailwind rendered markdown page --- .../ja/guides/integrations-guide/preact.mdx | 2 +- .../ja/recipes/tailwind-rendered-markdown.mdx | 99 +++++++++++++++++++ 2 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 src/content/docs/ja/recipes/tailwind-rendered-markdown.mdx diff --git a/src/content/docs/ja/guides/integrations-guide/preact.mdx b/src/content/docs/ja/guides/integrations-guide/preact.mdx index da9fa19b6dbd2..0a2d12323cbb4 100644 --- a/src/content/docs/ja/guides/integrations-guide/preact.mdx +++ b/src/content/docs/ja/guides/integrations-guide/preact.mdx @@ -181,7 +181,7 @@ Reactコンポーネントライブラリをインポートする場合、`react

-Preact Viteプラグインに、追加の[Babel設定オプション](https://babeljs.io/docs/options)を通すことができます。これにより、Preactコンポーネントに適用されるBabelの変換処理をカスタマイズすることができます。 +Preact Vite プラグインに、追加の [Babel設定オプション](https://babeljs.io/docs/options) を通すことができます。これにより、Preactコンポーネントに適用されるBabelの変換処理をカスタマイズすることができます。 例えば、以下の設定は、Preactコンポーネントを処理する際に、`.babelrc`を読み込むようBabelに指示するものです: diff --git a/src/content/docs/ja/recipes/tailwind-rendered-markdown.mdx b/src/content/docs/ja/recipes/tailwind-rendered-markdown.mdx new file mode 100644 index 0000000000000..87067c8f5a7de --- /dev/null +++ b/src/content/docs/ja/recipes/tailwind-rendered-markdown.mdx @@ -0,0 +1,99 @@ +--- +title: TailwindタイポグラフィでレンダリングされたMarkdownにスタイルを適用する +description: '@tailwind/typographyを使ってレンダリングされたMarkdownにスタイルを適用する方法を紹介します。' +i18nReady: true +type: recipe +--- +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; + +[Tailwind](https://tailwindcss.com)のTypographyプラグインを使用して、Astroの[**コンテンツコレクション**](/ja/guides/content-collections/)などのソースからレンダリングされたMarkdownにスタイルを適用できます。 + +このレシピでは、Tailwindのユーティリティクラスを使ってMarkdownコンテンツにスタイルを適用するための、再利用可能なAstroコンポーネントの作り方を紹介します。 + +## 前提条件 + +以下の条件を満たすAstroプロジェクト： + +- [TailwindのViteプラグイン](/ja/guides/styling/#tailwind)がインストールされていること +- Astroの[コンテンツコレクション](/ja/guides/content-collections/)を使用していること + +## `@tailwindcss/typography`のセットアップ + +まず、お好みのパッケージマネージャーで`@tailwindcss/typography`をインストールします。 + + + + ```shell + npm install -D @tailwindcss/typography + ``` + + + ```shell + pnpm add -D @tailwindcss/typography + ``` + + + ```shell + yarn add --dev @tailwindcss/typography + ``` + + + +次に、TailwindのCSSファイルでパッケージをプラグインとして追加します。 + +```css title="src/styles/global.css" ins={2} +@import 'tailwindcss'; +@plugin '@tailwindcss/typography'; +``` + +## レシピ + + +1. レンダリングされたMarkdown用に``を持つ`
`でラップする``コンポーネントを作成します。親要素に`prose`スタイルクラスと任意の[Tailwind要素モディファイアー](https://tailwindcss.com/docs/typography-plugin#element-modifiers)を追加します。 + + ```astro title="src/components/Prose.astro" + --- + --- +
+ +
+ ``` + :::tip + `@tailwindcss/typography`プラグインは[**要素モディファイアー**](https://tailwindcss.com/docs/typography-plugin#element-modifiers)を使用して、`prose`クラスを持つコンテナの子コンポーネントにスタイルを適用します。 + + これらのモディファイアーは以下の一般的な構文に従います。 + + ``` + prose-[element]:class-to-apply + ``` + + たとえば、`prose-h1:font-bold`はすべての`

`タグに`font-bold`のTailwindクラスを適用します。 + ::: + +2. Markdownをレンダリングしたいページでコレクションエントリーを取得します。`await render(entry)`から取得した``コンポーネントを``の子として渡し、MarkdownコンテンツをTailwindのスタイルでラップします。 + + ```astro title="src/pages/index.astro" + --- + import Prose from '../components/Prose.astro'; + import Layout from '../layouts/Layout.astro'; + import { getEntry, render } from 'astro:content'; + + const entry = await getEntry('collection', 'entry'); + const { Content } = await render(entry); + --- + + + + + + ``` + + +## 参考リソース + +- [Tailwind Typographyのドキュメント](https://tailwindcss.com/docs/typography-plugin)