Blazor プロジェクトの新規作成
- Visual Studio 2022を開いて
- プロジェクトの新規作成を押下
- Blazorのウエブアプリテンプレートを選択
- 「次」を押下
- プロジェクト名を入力
- 「次」を押下
- 「作成」を押下
デフォールトのBootstrapスタイルを削除
-
wwwrootフォルダーの中にあるbootstrapフォルダーとapp.cssファイルを選択
- 右クリックすると表示されるコンテキストメニューで「削除」をクリックします
プロジェクトにtailwindcssを追加
tailwindcssのインストール
- 必要ならNode.jsをインストールしてください。
- グローバルでtailwindcssをインストール
npm i -g tailwind
tailwindcssの設定
- PowerShellでtailwindcssを初期化
cd .\TailwindCSSTest\ npx tailwindcss init - tailwindの設定ファイルの
tailwind.config.jsが作成されたの確認
-
tailwind.config.jsを開いて
-
tailwind.config.jsを初期化
新しいcssファイルの生成
cssファイルのテンプレートの作成
- プロジェクトを右クリック
- 右クリックすると表示されるコンテキストメニューで Add ＞ New Folder を選択
- 新しいフォルダーを
Stylesに名付け
-
Stylesフォルダーを右クリック
- 右クリックすると表示されるコンテキストメニューで Add ＞ New Item を選択
- ASPNET.Core ＞ Web ＞ Content ＞ Style Sheet を選択
- スタイルシートのファイル名を入力
- 「追加」を押下
-
Styles\app.cssの作成確認 -
Styles\app.cssを開いて
- tailwindcssを利用するように
Styles\app.cssを初期化
CSSファイルを生成
- PowerShellで
wwwrootにCSSファイルを生成、--watchを追加するとホットリロードもできます。npx tailwindcss -i .\Styles\app.css -o .\wwwroot\css\app.css --watch -
wwwroot\css\app.cssの作成確認 -
wwwroot\css\app.cssを開いて
tailwindcssを利用するCSSファイルの生成の確認できます！
CSSファイルのパス
-
Components\App.razorを開いて、CSSファイルのパスはapp.cssのままです！
- CSSファイルのパスを
css/app.cssに変更
tailwindcssの動作確認
デフォルトの動作確認
起動すると
動作確認のスタイル追加
-
tailwindcssの動作確認するためにページのコンテンツの背景色をレスポンシブな方法で赤・青・緑に変更させる：
- 赤：～小
- 青：小～中
- 緑：中～
-
ホットリロードしない場合は PowerShellで
wwwrootにCSSファイルを生成npx tailwindcss -i .\Styles\app.css -o .\wwwroot\css\app.css
動作確認
- 起動させて動作確認する
- 赤：～小
- 青：小～中
- 緑：中～
- 赤：～小
参考（英語）
- Blazor & Tailwind CSS 🔥 Quick Start Guide
- Building beautiful Blazor apps with Tailwind CSS | .NET Conf 2023
TailwindCSSの拡張機能
プロジェクトで「Tailwind CSS VS 2022 Editor Support」拡張機能に追加されたメニュー項目から Tailwindcss をセットアップできますがプロキシの背後にいる場合はそのままでは機能しません。