knaka Tech-Blog

<h3 id="%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h3>
<p>TailwindCSS, vite + Astro 3で使うメモです</p>
<hr>
<h3 id="%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h3>
<ul>
<li>TailwindCSS</li>
<li>Astro 3</li>
</ul>
<hr>
<h3 id="%E9%96%A2%E9%80%A3">
<a class="header-anchor-link" href="#%E9%96%A2%E9%80%A3" aria-hidden="true"></a> 関連</h3>
<ul>
<li>
<p><a href="https://docs.astro.build/ja/guides/integrations-guide/tailwind/" target="_blank" rel="nofollow noopener noreferrer">https://docs.astro.build/ja/guides/integrations-guide/tailwind/</a></p>
</li>
<li>
<p><a href="https://tailwindcss.com/docs/guides/astro" target="_blank" rel="nofollow noopener noreferrer">https://tailwindcss.com/docs/guides/astro</a></p>
</li>
</ul>
<hr>
<ul>
<li>astro 追加しておきます</li>
</ul>
<div class="code-block-container"><pre><code>npx astro add tailwind
</code></pre></div>

<hr>
<ul>
<li>pages/index.astro</li>
</ul>
<div class="code-block-container"><pre><code>    &lt;main&gt;
        &lt;h1 class="text-3xl font-bold underline"&gt;
        Hello world!
        &lt;/h1&gt;
        &lt;hr /&gt;
        &lt;h1 class="text-2xl font-bold underline"&gt;
        test_2
        &lt;/h1&gt;
        &lt;hr /&gt;
        &lt;p class="text-2xl font-bold underline"&gt;Hoge4&lt;/p&gt;
        &lt;hr /&gt;        
    &lt;/main&gt;
</code></pre></div>

<ul>
<li>参考のレイアウト</li>
</ul>
<p><img src="https://storage.googleapis.com/zenn-user-upload/07252671aa3a-20230901.png" alt loading="lazy" class="md-img"></p>
