Tailwind CSS로 .NET Core Blazor 서버를 설정하는 방법

mkdir TailwindDotNet
cd TailwindDotNet
dotnet new blazorserver
npm init -y
npm install -D tailwindcss autoprefixer postcss
npx tailwind init -p

"scripts": {
    "css:build": "npx tailwind build ./wwwroot/css/site.css -o ./wwwroot/css/output.css"
  },

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

'./Pages/**/*.cshtml',
'./Pages/**/*.razor',
'./Views/**/*.chstml',
'./Views/**/*.razor',
'./Shared/**/*.razor',

<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>

    <link href="css/output.css" rel="stylesheet" />

닷넷 시계로 작업하기

npx tailwind build ./wwwroot/css/site.css -o ./wwwroot/css/output.css --watch

dotnet watch run