2024: Blazor のウェブアプリで tailwind.css を利用 (ASP.NET Core / .Net 8.0 対象）

## Blazor プロジェクトの新規作成
1. Visual Studio 2022を開いて
2. プロジェクトの新規作成を押下
![project_create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/4252179d-3568-bd4d-5579-fbfd0c319ee5.png)
3. Blazorのウエブアプリテンプレートを選択
4. 「次」を押下
![project_create_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/e56fb257-c2b3-6e19-1d21-cb1d8a1a7256.png)
5. プロジェクト名を入力
6. 「次」を押下
![project_create_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/b5178b16-7bfb-d05c-b166-38c3fff03eac.png)
7. 「作成」を押下
![project_create_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/953d7ce5-a8a1-0328-82a3-19dae4687b53.png)

## デフォールトのBootstrapスタイルを削除 
8. `wwwroot`フォルダーの中にある`bootstrap`フォルダーと`app.css`ファイルを選択
![project_create_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/3659727b-da12-1fa2-6d04-80a2f851edc2.png)
9. 右クリックすると表示されるコンテキストメニューで「削除」をクリックします
![project_create_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/6891695c-f5b7-5494-3e36-a59e244b42cd.png)

## プロジェクトに[tailwindcss](https://tailwindcss.com/)を追加
### tailwindcssのインストール
10. 必要なら[Node.js](https://nodejs.org/en/download/)をインストールしてください。
11. グローバルでtailwindcssをインストール
    ```
        npm i -g tailwind
    ```
### tailwindcssの設定
12. PowerShellでtailwindcssを初期化
    ```
        cd .\TailwindCSSTest\
        npx tailwindcss init
    ```
13. tailwindの設定ファイルの`tailwind.config.js`が作成されたの確認
![project_create_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/da361d1d-de4e-1ac0-305a-5e52ce379721.png)
14. `tailwind.config.js`を開いて
![project_create_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/7f986fac-b806-93d2-d2fa-ba4767dbb129.png)
15. `tailwind.config.js`を初期化
![project_create_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/3c95b320-4670-d8c1-11a8-ba330469db1f.png)

## 新しいcssファイルの生成
### cssファイルのテンプレートの作成
16. プロジェクトを右クリック
![project_create_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/c9859b84-82a3-6f7a-0e87-058ca6d60a4f.png)
17. 右クリックすると表示されるコンテキストメニューで Add ＞ New Folder を選択
![project_create_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/cdd0b1f1-37d5-c28c-9dc5-28ded9ff2497.png)
18. 新しいフォルダーを`Styles`に名付け
![project_create_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/11532ada-1cae-9214-fe52-1709c65dd669.png)
19. `Styles`フォルダーを右クリック
![project_create_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/bd6c7cde-80f4-2f73-96a8-7feb1232854b.png)
20. 右クリックすると表示されるコンテキストメニューで Add ＞ New Item を選択
![project_create_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/bbbd5750-10de-dfdc-743e-2f36fa1a74a3.png)
21. ASPNET.Core ＞ Web ＞ Content ＞ Style Sheet を選択
22. スタイルシートのファイル名を入力
23. 「追加」を押下
![project_create_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/8c4475f7-02a0-7d61-cca8-0d0550e7fb14.png)
24. `Styles\app.css`の作成確認
26. `Styles\app.css`を開いて
![project_create_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/3587da7a-8323-546f-59e8-f8a0122f4914.png)
27. tailwindcssを利用するように`Styles\app.css`を初期化
![project_create_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/87896087-b245-2418-3050-a8d5687dc9ad.png)
### CSSファイルを生成
28. PowerShellで`wwwroot`にCSSファイルを生成、`--watch`を追加するとホットリロードもできます。
    ```
        npx tailwindcss -i .\Styles\app.css -o .\wwwroot\css\app.css --watch
    ```
29. `wwwroot\css\app.css`の作成確認
30. `wwwroot\css\app.css`を開いて
![project_create_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/9dd7a28f-cefb-7e58-8cf3-f0cdbc6d03a7.png)
tailwindcssを利用するCSSファイルの生成の確認できます！
### CSSファイルのパス
31. `Components\App.razor`を開いて、CSSファイルのパスは`app.css`のままです！
![project_create_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/e0b2dece-9bb7-88aa-af0b-2e87cec66eea.png)
32. CSSファイルのパスを`css/app.css`に変更
![project_create_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/b9b27a09-67ed-c09f-a238-960cff6e7585.png)


## tailwindcssの動作確認
### デフォルトの動作確認
起動すると
![project_create_19.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/c9c7594e-9712-e1b3-9246-36cbcc30501c.jpeg)
### 動作確認のスタイル追加
33. tailwindcssの動作確認するためにページのコンテンツの背景色をレスポンシブな方法で赤・青・緑に変更させる：

    - 赤：～小
    - 青：小～中
    - 緑：中～
![project_create_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/3d515404-1c48-3634-4726-47879df3a825.png)
34. ホットリロードしない場合は PowerShellで`wwwroot`にCSSファイルを生成
    ```
        npx tailwindcss -i .\Styles\app.css -o .\wwwroot\css\app.css
    ```
### 動作確認
35. 起動させて動作確認する
    - 赤：～小
![project_create_25.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/a3889e3c-16af-bc11-6930-81572846e1fd.jpeg)
    - 青：小～中
![project_create_24.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/6c1520f8-a17f-4787-f393-e8c4300a1961.jpeg)
    - 緑：中～
![project_create_23.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/ce4599b2-cd82-5871-d1fd-2e0fcaa05c01.jpeg)

## 参考（英語）
- [Blazor & Tailwind CSS 🔥 Quick Start Guide](https://www.youtube.com/watch?v=tj4dNN2jQt0)
- [Building beautiful Blazor apps with Tailwind CSS | .NET Conf 2023](https://www.youtube.com/watch?v=QIdedo8iI4Y)

## TailwindCSSの拡張機能
プロジェクトで「[Tailwind CSS VS 2022 Editor Support](https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS)」拡張機能に追加されたメニュー項目から **Tailwindcss** をセットアップできますがプロキシの背後にいる場合はそのままでは機能しません。