사용자 지정 및 임의 값을 포함하여 Tailwind CSS에서 상자 그림자를 사용하는 방법

이 게시물은 원래 Red Pixel Themes에 게시되었습니다.

소개

Since they were introduced in 2009 , 그림자는 모든 디자인에 감각을 더할 수 있는 좋은 방법이었습니다. 그림자는 수년에 걸쳐 발전해 왔으며 이제 매우 유연하여 background-image 속성이 작동하는 방식과 유사하게 단일 요소에 여러 그림자를 허용할 수도 있습니다.

전제 조건

이 기사의 유일한 전제 조건은 CSS에서 상자 그림자가 작동하는 방식을 알아야 한다는 것입니다. Check out the MDN page for a refresher .

간단히 요약하면 box-shadow CSS 속성을 사용하여 그림자를 적용하고 이 속성은 그림자당 최대 5개의 값(x 오프셋, y 오프셋, 흐림 반경, 확산 반경 및 색상)을 허용합니다. 여러 그림자를 추가하려면 쉼표로 구분하면 됩니다.

기본 Tailwind CSS 그림자 사용

Tailwind CSS에는 작은 그림자( sm )에서 매우 큰 그림자( 2xl )에 이르기까지 즉시 사용할 수 있는 기본 그림자 목록이 있습니다. 다음은 framework의 목록입니다.

boxShadow: {
  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
  DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
  none: 'none',
},

다음 구문을 사용하여 사용합니다. shadow-[value] .

예를 들어:

<div class="shadow"></div> // Default shadow, uses the "DEFAULT" value
<div class="shadow-2xl"></div> // Uses the "2xl" value

사용자 지정 값 추가

Tailwind CSS에 자신만의 그림자를 추가하려면 Tailwind CSS 구성의 boxShadow 속성에 extend 개체를 추가하고 거기에 값을 추가하면 됩니다.

예를 들어 custom라는 그림자를 추가하려면 다음과 같이 하십시오.

// Tailwind CSS config
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        "custom": '0 50px 25px -24px rgb(0 0 0 / 0.3)'
      }
    },
  },
}

마크업에서 임의의 값 사용

하지만 프로젝트의 한 곳에서만 사용하고 싶은 그림자가 있다면 어떨까요? 임의의 값을 사용할 수 있는 좋은 기회입니다.

우리가 만든 커스텀 섀도우를 임의의 값으로 사용하고 싶다고 가정해 보겠습니다. 작동 방식은 다음과 같습니다.

<div class="shadow-[0_50px_25px_-24px_rgb(0,0,0,0.3)]"></div>

달라보이죠? 이 스니펫을 분석해 보겠습니다.

그림자가 작동하려면 값 사이에 공백이 필요하지만 임의 값 구문에서는 공백을 사용할 수 없습니다. 다행스럽게도 대안이 있습니다. 공백을 밑줄( _ )로 바꾸면 됩니다.

다음으로 그림자 색상의 경우 원본 그림자에서 쉼표가 없는 최신 RGB 구문을 사용했습니다. 하지만 이 구문은 아직 임의의 값에서 작동하지 않으므로 쉼표를 사용하는 이전 구문으로 다시 전환하고 숫자 사이의 공백을 제거해야 합니다.

임의의 값으로 여러 그림자 사용

여러 그림자를 사용하려면 어떻게 해야 합니까? 위의 사항을 고려하여 작동 방식은 다음과 같습니다.

<div class="shadow-[0_4px_6px_-1px_rgb(0,0,0,0.1),0_2px_4px_-2px_rgb(0,0,0,0.1)]"></div>

동일한 방식으로 작동하며 그림자 사이에 쉼표( , )를 추가하기만 하면 됩니다.


이게 다야! Tailwind CSS로 그림자를 사용하는 방법, 사용자 정의 값으로 자신의 그림자를 추가하는 방법, 그림자를 임의의 값으로 사용하는 방법을 배웠기를 바랍니다. 다음편까지!

이 기사가 마음에 들면 다음 항목도 좋아할 것입니다.

How to work with background images in Tailwind CSS

3 Tips for working with the Tailwind Forms plugin

How to do gradient text with Tailwind CSS