Tailwind CSS set up flow

公式サイト：Get started with Tailwind CSS

インストールの種類

1. Tailwind CLI
2. Using PostCSS
3. Framework Guides
4. Play CDN

💡 今回は 2 で進める。
🙅 4 は非推奨。試用時のみに留める。（CSSに制限があるため）

手順 📗 Tailwind CSS を PostCSSのプラグインとして使う

1. npm init -y 👉 package.json の生成

2. npm i -D tailwindcss postcss-cli autoprefixer cssnano

   • npm i -D postcss-cli 👉 npm run build コマンド使用可能
   • npm i -D cssnano 👉 build実行時に cssを minify化

3. npx tailwindcss init -p 👉 設定ファイル作成。 -p オプションはPostCSS構成ファイルの作成: postcss.config.js

4. コンパイルされたcssを出力するためのdistフォルダとコンパイル前のcssを入れておくためのsrcフォルダを作成する。

   💡 フォルダ構成
   ├ dist
   ├ node_modules
   ├ package-lock.json
   ├ package.json
   └ src

5. tailwind.config.jsの設定。（ jit と読込ディレクトリ指定）

6. input.css（名前は自由）を作成。

7. 公式サイトからTailwindディレクティブをinput.cssにコピペ。

8. index.html を作成、head内にスタイルシート（../dist/output.css）読込及びoutput.cssを作成。
   💡 distという名前はビルド後のファイルによく付けられる。

9. VScode拡張機能 PostCSS Language Support を追加。（インストール済ならskip）

10. VScode拡張機能 Tailwind CSS IntelliSense を追加。
    💡 補完効かない場合は設定項目追記："editor.quickSuggestions": {"strings": true }

11. postcss.config.js でCSS圧縮（cssnano）の設定をする。

12. package.json の "scripts" に実行コマンドを追記する。

    1. npm run dev （開発用 - watch追加、CSS圧縮無し）
    2. npm run build （公開用 - CSS圧縮有り）

Tailwind CSS Docs

• TailwindCSS
• TailwindCSS JP
• daisyUI
• Flowrift
• CHEAT SHEET