개발/ASP.NET

[WebApp/MVC] Tailwind CSS의 @layer 지시어를 사용하여 Custom CSS Style 생성 후 Layout 페이지 적용하기

향포레스트 2023. 10. 29. 03:41
728x90

고민

Tailwind CSS에서 기본으로 제공하는 유틸리티 클래스가 많습니다. 기본적인 유틸리티 클래스에 익숙해지면 빠르게 스타일을 적용시킬 수 있습니다. 그런데, CSS에 새로 생기는 속성을 사용하고 싶을 땐 어떻게 할까? 고민이 생겼습니다.

💡생각한 해결 방법

  1. Tailwind CSS에 영향받지 않는 .css를 생성하여 참조하기
  2. build 된 파일에 css 코드 추가하기
  3. 사용할 페이지에 style 추가하기

생각해낸 방법 모두 유지보수와 운영 상관없고 개인 프로젝트라면 빠르게 해결하겠다. 싶었습니다. 협업한다고 생각하면 css 파일과 규칙성 없는 스타일 클래스들이 엄청 생길 것이고 tailwind css build 하면 코드 파일 관리가 엉망진창인 상상이 자꾸 듭니다.

그래서 공식 사이트를 찾아봤습니다. (사이트 번역이 안되서 ... 한참 찾았네요😂)

Tailwind CSS 공식 사이트의 Custom CSS Style 추가방법

추가할 속성 : text-shadow

CSS

text-shadow

속성은 텍스트에 그림자를 추가합니다.

.red-text-shadow {
  text-shadow: red 0 -2px;
}

Tailwind CSS의 기본 유틸리티에는 없는 text-shadow 속성을 추가하려고 합니다.

@layer 사용

Tailwind CSS에는 base, Components, Utilities 3가지 레이어가 있습니다.

Base : HTML 기본 재정의
Component : card, modal, alert, progress 등 UI 그룹 구성
Utility : background-color, color, font-size, font-weight 등 모든 요소에 항상 먼저 적용될 수 있도록 하는 속성을 정의

만약 Modal UI의 스타일의 그룹을 만들고 싶다면, Component, 지금처럼 단순하게 글자에 그림자를 주고 싶다면, Utility에 추가합니다.

site.css

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

@layer utilities {
    .text-shadow {
        text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    }
}

Tailwind CSS build

CLI

npx tailwindcss -i wwwroot/site.css -o wwwroot/css/project.css --watch

만들어진 class 사용하기

project.css

.text-shadow {
  text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
}

_ProjectLayout.cshtml

<a class="uppercase lg:text-lg hr-logo-text-shadow text-shadow" href="/">a태그</a>

적용 화면

참고 사이트
공식 사이트 : https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
text-shadow : https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

728x90