이제 닷넷

Blazor 에 TailwindCSS를 적용하는 방법은 여러 가지가 있지만, 최근 TailwindCSS 4 버전으로 올라오면서 기존 방식이 잘 작동하지 않는 문제가 있다. 

기존 TailwindCSS v3 방식

Blazor 에 TailwindCSS 적용하기 (v3 기준)

TailwindCSS 4로 업그레이드한 후, 기존과 동일한 설정을 그대로 사용하면 문제가 생긴다.
기본 Tailwind 유틸리티 클래스는 CSS에 포함되지만, 프로젝트에서 사용하는 커스텀 클래스들은 빌드 결과물에 반영되지 않는다.

• 일부 컴포넌트에 스타일이 아예 적용되지 않거나
• 기본 스타일만 들어가고, 실제 작성한 유틸리티 클래스들이 누락
• @apply 같은 지시어를 사용한 CSS가 무시됨

@tailwindcss/cli 패키지를 직접 사용할 수도 있는데 

npx @tailwindcss/cli -i wwwroot/css/tailwind.css -o wwwroot/assets/css/app.css

실행은 되지만 원하는 결과가 나오지 않는다.

해결 방법: tailwindcss 바이너리 직접 실행

TailwindCSS CLI 바이너리를 다운로드한 후, 
아래와 같이 직접 실행하는 방식으로 해결할 수 있다.

"scripts": {
    "build:css": "tailwindcss-windows-x64.exe  -i ./wwwroot/css/style.css -o ./wwwroot/css/app.css",
    "watch:css": "tailwindcss-windows-x64.exe  -i ./wwwroot/css/style.css -o ./wwwroot/css/app.css --watch"
  },

이 방식으로 실행하면 기본 스타일뿐 아니라 커스텀 유틸리티 클래스나 @apply 지시어로 작성한 CSS도 문제없이 반영된다.

추가 설정: Hot Reload & 정적 파일 감시 활성화

Properties/launchSettings.json 파일에서 각 프로필(http, https)에 아래 항목을 추가한다.

"hotReloadEnabled": true,
"watchStaticFiles": true

이제 프로젝트를 실행하면 TailwindCSS가 제대로 적용되고,
dotnet watch나 Visual Studio에서 F5로 실행해도 실시간으로 반영된다.

TailwindCSS를 Blazor 프로젝트에 적용하려면 기본적으로 몇 가지 설정이 필요하다.
아래는 TailwindCSS v3.x를 기준으로 적용했던 방식이다.

1. node와 npm 설치

TailwindCSS는 Node 기반이기 때문에 먼저 Node.js와 npm이 설치돼 있어야 한다.
Node.js 사이트에서 LTS 버전 설치.

2. Tailwind 및 관련 의존성 설치

npm init -y
npm install -D tailwindcss@3 postcss autoprefixer

3. tailwind.config.js 생성

npx tailwindcss init

module.exports = {
  content: [
    './**/*.razor',
    './**/*.html'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Tailwind 입력 파일 작성

wwwroot/css/tailwind.css 파일을 생성하고 아래 내용을 추가한다.

"scripts": {
  "build:css": "npx tailwindcss -i wwwroot/css/tailwind.css -o wwwroot/assets/css/app.css",
  "watch:css": "npx tailwindcss -i wwwroot/css/tailwind.css -o wwwroot/assets/css/app.css --watch"
}

6. _Host.cshtml 또는 index.html에 CSS 연결

Blazor Server일 경우 _Host.cshtml에,
Blazor WebAssembly일 경우 wwwroot/index.html에 아래 CSS 링크 추가한다.

<link href="assets/css/app.css" rel="stylesheet" />

7. 프로젝트 파일 수정(.csproj)

<Target Name="Tailwind" BeforeTargets="Build">
	<Exec Command="npm run build:css" />
</Target>

8. 실행 및 개발

터미널이나 Visual Studio의 패키지 관리자 콘솔(NPM 콘솔) 등에서 실행

npm run watch:css

이제 프로젝트를 실행하면 TailwindCSS가 제대로 적용되고,
dotnet watch나 Visual Studio에서 F5로 실행해도 실시간으로 반영된다.