設定方法.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" />
今コンパイルして実行すると、出力を構築します.CSS

DotNetウォッチでの作業


端末ウィンドウで実行する
npx tailwind build ./wwwroot/css/site.css -o ./wwwroot/css/output.css --watch
次にDotnetウォッチを実行します
dotnet watch run