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

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로 실행해도 실시간으로 반영된다.