設定方法.Bookiesを使用したネットコアブレーザーサーバ
3962 ワード
mkdir TailwindDotNet
cd TailwindDotNet
dotnet new blazorserver
npm init -y
npm install -D tailwindcss autoprefixer postcss
npx tailwind init -p
パッケージの編集.JSONとCSSの生成スクリプトを追加する"scripts": {
"css:build": "npx tailwind build ./wwwroot/css/site.css -o ./wwwroot/css/output.css"
},
ブートストラップの削除あなたのサイト.CSSは以下の行だけを含むべきです
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js
に次の行を追加する'./Pages/**/*.cshtml',
'./Pages/**/*.razor',
'./Views/**/*.chstml',
'./Views/**/*.razor',
'./Shared/**/*.razor',
あなたの変更.CSSビルドステップを含める<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<UpToDateCheckBuilt Include="wwwroot/css/site.css" Set="Css" />
<UpToDateCheckBuilt Include="postcss.config.js" Set="Css" />
<UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />
</ItemGroup>
<Target Name="Tailwind" BeforeTargets="Build">
<Exec Command="npm run css:build"/>
</Target>
</Project>
を参照してください.サイトの代わりにCSS.ブートストラップを削除する <link href="css/output.css" rel="stylesheet" />
今コンパイルして実行すると、出力を構築します.CSSDotNetウォッチでの作業
端末ウィンドウで実行する
npx tailwind build ./wwwroot/css/site.css -o ./wwwroot/css/output.css --watch
次にDotnetウォッチを実行しますdotnet watch run
Reference
この問題について(設定方法.Bookiesを使用したネットコアブレーザーサーバ), 我々は、より多くの情報をここで見つけました https://dev.to/gavi/how-to-setup-net-core-blazor-server-with-tailwind-css-57gnテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol