toitoi

<h1 id="package.json%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E9%A0%85%E7%9B%AE">
<a class="header-anchor-link" href="#package.json%E3%81%AB%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E9%A0%85%E7%9B%AE" aria-hidden="true"></a> package.jsonに追加する項目</h1>
<div class="code-block-container"><pre><code>  "scripts": {
    "dev": "tailwindcss build src/styles.css -o src/styles_dev.css",
    "build": "cross-env NODE_ENV=production tailwindcss build src/styles.css -o public/styles.css"
  },
</code></pre></div><p>開発環境ではsrcフォルダのcssを参照させ、本番環境ではpublicフォルダの中のcssを参照させる<br>
本番環境ではPurgeさせることで使ってないクラスを省き、ファイルサイズを軽くし最適化することができる<br>
また、Purgeをするためには</p>
<div class="code-block-container"><pre><code>npm install cross-env
</code></pre></div><p>を実行しておく必要がある</p>


<h1 id="tailwind%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%89%8B%E9%A0%86">
<a class="header-anchor-link" href="#tailwind%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%89%8B%E9%A0%86" aria-hidden="true"></a> Tailwindインストール手順</h1>
<div class="code-block-container"><pre><code>npm init -y // 設定ファイル package.json生成
</code></pre></div><div class="code-block-container"><pre><code>npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
</code></pre></div><p>tailwindインストール</p>
<div class="code-block-container"><pre><code>src/styles.css内に下記を追加
@tailwind base;
@tailwind components;
@tailwind utilities; 
</code></pre></div><p>tailwindcss.config.js生成</p>
<div class="code-block-container"><pre><code> npx tailwindcss init //生成
npx tailwindcss init -full //初期設定あり
</code></pre></div>