[Tailwind CSS] Customizing Shadow

[Tailwind CSS] Customizing Shadow

방법 1

: extend로 만들어서 사용하기

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

크기 -> 색상 순으로 작성하면 된다. (순서 바꿔서 한 경우, 적용되지 않는다.)

 

크기 -> 색상 순으로 작성해야 한다.

(순서 바꿔서 작성 한 경우, 적용되지 않는다.)

---

방법 2

: 직접 값 입력하기

// example.js
export default function Example() {
   return (
      <div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
         <!-- ... -->
      </div>
    )
}

 

크기 사이에 UnderBar(_)를 입력해주어야 하며,

색상의 숫자 사이에 공백이 없어야 한다.

0px인 경우 0으로 적어야 적용된다.