ASP.NET Core 8 MVC 의 Tailwind CSS 3 버전 설치 및 설정 가이드

 

 

---

ASP.NET Core 8 MVC 프로젝트에 Tailwind CSS 3 버전 설치 및 설정 가이드

 

최근 많은 웹 개발자들이 CSS 프레임워크 중 하나로 Tailwind CSS를 선택하고 있습니다. 본 포스트에서는 ASP.NET Core 8 MVC 프로젝트에 Tailwind CSS의 안정적인 3 버전을 설치하고, 환경설정부터 빌드 파이프라인에 자동 통합하는 방법까지 단계별로 설명합니다.

목차

1. 개발 환경 및 요구 사항
2. npm 초기화 및 패키지 설치
3. Tailwind CSS 설정 파일 생성
4. Tailwind CSS 입력 파일 작성
5. npm 빌드 스크립트 작성
6. ASP.NET Core MVC에 CSS 적용
7. 빌드 파이프라인에 자동 통합
8. 마무리 및 테스트

---

개발 환경 및 요구 사항

먼저, 아래와 같은 개발 환경이 준비되어 있어야 합니다.

• ASP.NET Core 8 MVC 프로젝트: 이미 생성되어 있다고 가정합니다.
• Node.js & npm: Tailwind CSS 설치 및 빌드를 위해 필요합니다.
  터미널에서 node -v와 npm -v 명령어로 버전 정보를 확인해 주세요.
• 코드 편집기: Visual Studio 또는 Visual Studio Code 등

 

 

---

npm 초기화 및 패키지 설치

Tailwind CSS를 사용하려면 프로젝트 루트에 package.json 파일이 필요합니다. 프로젝트 루트(예: 웹 UI 프로젝트 폴더)에서 아래 명령어를 실행합니다.

npm init -y

 

 

이 명령어는 기본 설정으로 package.json 파일을 생성합니다.

이후, Tailwind CSS 3 버전과 관련 도구(PostCSS, Autoprefixer)를 설치합니다. 터미널에서 아래 명령어를 실행하세요.

npm install -D tailwindcss@3 postcss autoprefixer

 

이 명령어를 통해 Tailwind CSS 3, PostCSS 및 Autoprefixer를 개발 의존성(devDependencies)으로 설치하게 됩니다.

---

Tailwind CSS 설정 파일 생성

설치가 완료되면 Tailwind CSS와 PostCSS 설정 파일을 생성합니다. 아래 명령어를 통해 두 파일을 한 번에 생성할 수 있습니다.

npx tailwindcss init -p

• 이 명령어를 실행하면 tailwind.config.js와 postcss.config.js 파일이 생성됩니다.
• 생성된 설정 파일을 나중에 프로젝트 구조에 맞게 수정하게 됩니다.

---

Tailwind CSS 입력 파일 작성

Tailwind CSS의 기본 스타일을 적용하기 위해 CSS 파일을 생성해야 합니다. 예를 들어, 프로젝트의 wwwroot/css 폴더에 tailwind.css 파일을 생성하고 아래 내용을 입력합니다.

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

이 파일은 Tailwind CSS의 기본 스타일, 컴포넌트, 그리고 유틸리티 클래스를 포함합니다.

---

npm 빌드 스크립트 작성

Tailwind CSS 파일을 실제로 빌드(컴파일)하기 위해 package.json 파일에 빌드 스크립트를 추가합니다. 예를 들어, 아래와 같이 추가할 수 있습니다.

"scripts": {
  "build:css": "tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/site.css --minify"
}

• -i: 입력 파일을 지정합니다.
• -o: 출력 파일(최종 빌드된 CSS 파일)을 지정합니다.
• --minify: CSS 파일을 압축합니다.

 

터미널에서 아래 명령어를 실행해 CSS 빌드가 정상적으로 완료되는지 확인합니다.

npm run build:css

 

빌드가 성공하면, wwwroot/css 폴더에 site.css 파일이 생성됩니다.

---

ASP.NET Core MVC에 CSS 적용

이제 생성된 CSS 파일을 ASP.NET Core MVC 프로젝트에 적용해 보겠습니다. 보통 _Layout.cshtml 파일(공통 레이아웃 파일)에 링크를 추가합니다.

 

<link rel="stylesheet" href="~/css/site.css" />

 

 

이렇게 하면 브라우저에서 Tailwind CSS가 정상적으로 적용되어 원하는 스타일을 사용할 수 있게 됩니다.

---

빌드 파이프라인에 자동 통합

매번 수동으로 npm run build:css를 실행하지 않고, 빌드 시 자동으로 Tailwind CSS 파일이 업데이트되도록 설정할 수 있습니다. 두 가지 대표적인 방법을 소개합니다.

 

1. csproj 파일에 MSBuild Target 추가

프로젝트 파일(.csproj)에 MSBuild Target을 추가하면 빌드 시 자동으로 Tailwind CSS 빌드 스크립트가 실행됩니다.

<Target Name="TailwindCss" BeforeTargets="Build">
  <!-- npm이 시스템 PATH에 등록되어 있어야 합니다. -->
  <Exec Command="npm run build:css" WorkingDirectory="$(ProjectDir)" />
</Target>

• 이 코드를 .csproj 파일의 끝부분( 바로 앞)에 추가합니다.
• **BeforeTargets="Build"**를 사용하여 빌드 전에 스크립트가 실행되도록 합니다.

2. Visual Studio Task Runner Explorer 사용

Visual Studio의 Task Runner Explorer 확장을 이용하여 npm 스크립트를 빌드 이벤트에 바인딩할 수도 있습니다.

1. Task Runner Explorer 설치:
   Visual Studio에서 확장 관리자를 통해 Task Runner Explorer를 설치합니다.
2. npm 스크립트 확인:
   package.json 파일에 "build:css" 스크립트가 정의되어 있는지 확인합니다.
3. Task Runner Explorer 열기:
   Visual Studio 상단 메뉴에서 보기 > 다른 창 > Task Runner Explorer를 선택합니다.
4. 스크립트 바인딩 설정:
   Task Runner Explorer 창에서 build:css 스크립트를 우클릭하고 Bindings > Before Build를 선택합니다.

이 두 방법 중 하나를 선택하면 빌드 시 자동으로 Tailwind CSS가 빌드되어 최신 CSS 파일이 생성되므로, 개발 생산성을 크게 향상시킬 수 있습니다.

---

마무리 및 테스트

설치 및 설정을 모두 마쳤다면, 다음 단계로 프로젝트를 빌드하고 실행하여 Tailwind CSS가 올바르게 적용되었는지 확인합니다.

• 테스트:
  Razor 뷰 파일에 Tailwind CSS 클래스(예: class="bg-blue-500 text-white p-4" 등)를 추가하고 브라우저에서 스타일이 반영되는지 확인합니다.
• 디버깅:
  만약 스타일이 적용되지 않거나 빌드 스크립트가 실행되지 않는다면, 터미널 출력 및 로그 파일을 확인하여 오류 메시지를 점검합니다.

---

결론

본 포스트에서는 ASP.NET Core 8 MVC 프로젝트에 Tailwind CSS 3 버전을 설치하고 설정하는 전체 과정을 단계별로 설명했습니다.

• npm 초기화와 패키지 설치부터 시작하여,
• Tailwind CSS 설정 파일 및 입력 CSS 파일 생성 후,
• npm 빌드 스크립트 작성과 ASP.NET Core에 CSS 적용,
• 마지막으로 빌드 파이프라인에 자동 통합하는 방법까지 소개하였습니다.

이 과정을 따라가면 최신 개발 환경에서 Tailwind CSS를 활용한 빠르고 효율적인 UI 개발이 가능해집니다. 문제가 발생할 경우, 각 단계별로 로그와 설정 파일을 꼼꼼히 확인해 보시기 바랍니다.

 

---

이 글이 여러분의 프로젝트에 도움이 되길 바랍니다. 질문이나 추가 도움이 필요하다면 댓글이나 문의를 남겨주세요.