Tailwind를 ASP.NET Core 프로젝트에 통합

우리는 Visual Studio 2022 Community을 사용합니다.
Gem.NetTailwind에서 코드를 찾을 수 있습니다.

1. ASP.NET Core 6.0 빈 웹 애플리케이션을 만듭니다.

면도기 페이지 구조를 추가합니다.

2. 프로젝트에 npm 지원을 추가합니다. "package.json" 파일이 프로젝트에 추가되었습니다.

3. "패키지 관리자 콘솔"로 tailwind를 설치합니다.

PM> cd Gem.NetTailwind
PM> npm install -D tailwindcss cross-env
PM> npx tailwindcss init

"node_modules"가 설치되었습니다.
"tailwind.config.js"파일이 생성되었습니다.

4. 순풍을 구성하려면:

모든 .razor 및 .cshtml 파일을 포함하도록 tailwind.config.js 파일을 업데이트합니다.

Tailwind 입력 스타일시트 Styles\input.css를 만듭니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

마지막으로 package.json 파일을 업데이트하여 이 스크립트 섹션을 추가합니다.

"scripts": {
    "tailwind": "cross-env NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./Styles/input.css -o ./wwwroot/css/output.css --watch"
  },

5. 프로젝트에 Tailwind.Extensions.AspNetCore를 추가합니다.

Tailwind AspNetCore NuGet 패키지를 설치합니다.
Program.cs에 추가하고 app.Run() 앞에 이 코드를 추가합니다.
if (app.Environment.IsDevelopment())
{
app.RunTailwind("순풍", "./");
//또는
app.RunTailwind("순풍", "../Client/");
}
Program.cs에 이 using 문을 추가합니다.
Tailwind 사용

6. NPM을 ASP.Net Core 프로젝트에 통합하여 "MSBuild" 사용

*.csproj 파일을 수정합니다.

<PropertyGroup>
 ...
 <NpmLastInstall>node_modules/.last-install</NpmLastInstall>
</PropertyGroup>
...
<!-- Check whether npm install or not! -->
<Target Name="CheckForNpm" BeforeTargets="NpmInstall">
 <Exec Command="npm -v" ContinueOnError="true">
  <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
 </Exec>
 <Error Condition="'$(ErrorCode)' != '0'" Text="You must install NPM to build this project" />
</Target>

<!-- install package.json package auto "node_modules" -->
<Target Name="NpmInstall" BeforeTargets="Compile" Inputs="package.json" Outputs="$(NpmLastInstall)">
<Exec Command="npm install" />
<Touch Files="$(NpmLastInstall)" AlwaysCreate="true" />
</Target>

다음 단계에서는 테마 기능을 프로젝트에 추가합니다.
조정 유지!