tailwindcss


<p>dangerouslySetInnerHTMLを使ってHTMLをレンダリングした時にTailwind CSSが適用されませんでした。</p>



<p>少し調べて使えそうだった対処法をメモしておきます。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#_Tailwind_CSS">方法① Tailwind CSSのプラグインを使用する</a><ul><li><a href="#_typography">手順⑴ プラグイン「typography」をインストールする</a></li><li><a href="#_tailwindconfigjs">手順⑵ tailwind.config.jsを編集する</a></li><li><a href="#_classprose">手順⑶ classに「prose」を追加する</a></li></ul></li><li><a href="#_Tailwind_CSSCDN">方法② Tailwind CSSのCDNを利用する</a><ul><li><a href="#_HeadCDN">手順⑴ Head内にCDNコードを追加する</a></li></ul></li><li><a href="#i">まとめ</a></li></ul></div>
<h2><span id="_Tailwind_CSS">方法① Tailwind CSSのプラグインを使用する</span></h2>



<p>Tailwindの公式プラグインにdangerouslySetInnerHTMLによって取得したデータの各タグに合わせてデフォルトのスタイルを適用してくれる「typography」があります。</p>



<h3><span id="_typography">手順⑴ プラグイン「typography」をインストールする</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install -D @tailwindcss/typography</code></pre></div>



<h3><span id="_tailwindconfigjs">手順⑵ tailwind.config.jsを編集する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="tailwind.config.js" data-lang="JavaScript"><code>module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require(&#39;@tailwindcss/typography&#39;),  // 追加
    // ...
  ],
}</code></pre></div>



<h3><span id="_classprose">手順⑶ classに「prose」を追加する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-lang="JSX"><code>&lt;div className=&quot;prose&quot; dangerouslySetInnerHTML={{ __html: content }} /&gt;</code></pre></div>



<h2><span id="_Tailwind_CSSCDN">方法② Tailwind CSSのCDNを利用する</span></h2>



<p>dangerouslySetInnerHTMLのデータ内で、Tailwind CSSのclassを指定したい場合はCDNを利用する方法があります。</p>



<h3><span id="_HeadCDN">手順⑴ Head内にCDNコードを追加する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-lang="JSX"><code>&lt;head&gt;
  {/* ... */}
  {/* 追加 */}
  &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
&lt;/head&gt;</code></pre></div>



<h2><span id="i">まとめ</span></h2>



<p>dangerouslySetInnerHTMLのデータ内でTailwindのclass指定したものを適用されるようにしたかったのですが、CDNを利用するしか方法がなさそうでした。</p>



<ul class="references">
<li><a href="https://tailwindcss.com/docs/typography-plugin#installation">@tailwindcss/typography &#8211; Tailwind CSS</a></li>



<li><a href="https://github.com/tailwindlabs/tailwindcss/discussions/7756">dangerouslySetInnerHTML not working with Taillwind and React.js · Discussion #7756</a></li>
</ul>


【React】dangerouslySetInnerHTMLにTailwind CSSを適用する


<p>Next.jsを利用している中で、Tailwindを導入してみました。</p>



<p>その過程をメモしていきます。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#Tailwind_CSS">Tailwind CSSをインストールする</a></li><li><a href="#tailwindconfigjs">「tailwind.config.js」を生成する</a></li><li><a href="#tailwindconfigjs-2">「tailwind.config.js」を編集する</a></li><li><a href="#stylesglobalcss">「styles/global.css」を編集する</a></li><li><a href="#Tailwind">Tailwind導入完了。</a></li><li><a href="#Tailwind-2">Tailwindが反映されない場合の対処法</a></li><li><a href="#i">おまけ：よく使うプラグイン</a><ul><li><a href="#_tailwindcssline-clamp">プラグイン⑴ @tailwindcss/line-clamp</a></li></ul></li></ul></div>
<h2><span id="Tailwind_CSS">Tailwind CSSをインストールする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="ターミナル"><code>$ npm i tailwindcss@latest postcss@latest autoprefixer@latest</code></pre></div>



<h2><span id="tailwindconfigjs">「tailwind.config.js」を生成する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="ターミナル"><code>$ npx tailwindcss init -p</code></pre></div>



<h2><span id="tailwindconfigjs-2">「tailwind.config.js」を編集する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="tailwind.config.js" data-lang="JavaScript"><code>module.exports = {
    content: [
        &quot;./pages/**/*.{js,ts,jsx,tsx}&quot;,       // 追加
        &quot;./components/**/*.{js,ts,jsx,tsx}&quot;,  // 追加（componentsフォルダがある場合）
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}</code></pre></div>



<p><code>content</code>内の<code>./components/*<em>/</em>.{js,ts,jsx,tsx}</code>の部分は「componentsフォルダ内」のファイルでもTailwind.cssが適用されるようにしています。</p>



<p>他にも適用したいフォルダがある場合には、このcomponentsの部分を変更したり追加したりしてみてください。</p>



<h2><span id="stylesglobalcss">「styles/global.css」を編集する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-file="styles/global.css" data-lang="CSS"><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre></div>



<p>元々記載されているCSSは削除かコメントアウトする。</p>



<h2><span id="Tailwind">Tailwind導入完了。</span></h2>



<p>これでclassNameにTailwind.cssの記載をすれば反映されます。</p>



<h2><span id="Tailwind-2">Tailwindが反映されない場合の対処法</span></h2>



<p>既にローカルサーバーで起動している場合は、すぐに反映されないことがあります。その場合は<strong>再度起動</strong>してみてください。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file="ターミナル"><code>$ npm run dev</code></pre></div>



<h2><span id="i">おまけ：よく使うプラグイン</span></h2>



<h3><span id="_tailwindcssline-clamp">プラグイン⑴ @tailwindcss/line-clamp</span></h3>



<p><strong>指定した行数以降のテキストを「&#8230;（三点リーダー）」に変換する</strong>プラグインです。</p>



<ul>
<li><a href="https://github.com/tailwindlabs/tailwindcss-line-clamp">tailwindlabs/tailwindcss-line-clamp &#8211; GitHub</a></li>
</ul>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm install @tailwindcss/line-clamp</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-file="tailwind.config.js" data-lang="JavaScript"><code>module.exports = {
    content: [
        &quot;./pages/**/*.{js,ts,jsx,tsx}&quot;,
        &quot;./components/**/*.{js,ts,jsx,tsx}&quot;,
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require(&#39;@tailwindcss/line-clamp&#39;),  // 追加
    ],
}</code></pre></div>



<ul class="references">
<li><a href="https://tailwindcss.com/docs/installation"> Installation: Tailwind CLI</a></li>



<li><a href="https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css">Just-In-Time: The Next Generation of Tailwind CSS</a></li>



<li><a href="https://github.com/tailwindlabs/tailwindcss-line-clamp">tailwindlabs/tailwindcss-line-clamp &#8211; GitHub</a></li>
</ul>



<p></p>


「tailwindcss」の記事一覧