【React】dangerouslySetInnerHTMLにTailwind CSSを適用する
2023/1/5
2023/1/5
dangerouslySetInnerHTMLを使ってHTMLをレンダリングした時にTailwind CSSが適用されませんでした。
少し調べて使えそうだった対処法をメモしておきます。
目次
方法① Tailwind CSSのプラグインを使用する
Tailwindの公式プラグインにdangerouslySetInnerHTMLによって取得したデータの各タグに合わせてデフォルトのスタイルを適用してくれる「typography」があります。
手順⑴ プラグイン「typography」をインストールする
$ npm install -D @tailwindcss/typography手順⑵ tailwind.config.jsを編集する
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/typography'), // 追加
// ...
],
}手順⑶ classに「prose」を追加する
<div className="prose" dangerouslySetInnerHTML={{ __html: content }} />方法② Tailwind CSSのCDNを利用する
dangerouslySetInnerHTMLのデータ内で、Tailwind CSSのclassを指定したい場合はCDNを利用する方法があります。
手順⑴ Head内にCDNコードを追加する
<head>
{/* ... */}
{/* 追加 */}
<script src="https://cdn.tailwindcss.com"></script>
</head>まとめ
dangerouslySetInnerHTMLのデータ内でTailwindのclass指定したものを適用されるようにしたかったのですが、CDNを利用するしか方法がなさそうでした。
最近の記事
音楽生成AI「Suno」の使い方まとめ！作詞作曲が簡単にできる？
簡単に曲が作れるAIということでよく聞く「Suno（Chirp）」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ｜GPT・DALL·E・Whisperなど
Open AIのAPI（一部）の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI（Upload file）で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。（Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12