Tailwind CSS에 텍스트 그림자 지원을 추가하는 방법

Tailwind CSS 구성을 업데이트하지 않으려면 JIT를 사용하여 다음을 작성할 수 있습니다.

<h1 class="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]">Hello</h1>

그리고 여전히 shadow-red-500와 같은 클래스를 사용할 수 있기를 원한다면 이렇게 할 수 있습니다.

<h1 class="[text-shadow:_0_1px_0_var(--tw-shadow-color)]">Hello</h1>

지원하지 않는 이유는 무엇입니까? 🤷‍♂️

현재 Tailwind CSS의 text-shadow 클래스에 대한 공식적인 지원은 없으며 실제로 최근 트윗에서 Tailwind CSS의 작성자인 Adam Wathan은 다음과 같이 말했습니다.

What CSS feature that Tailwind doesn't have baked in do you find yourself getting the most irrationally angry about? Need ideas for v3.1 😅

In before text-shadow — harder than it sounds, one day, I'm sorry 👀

그 이유는 정당합니다. 어려운 것은 구현이 아니라 실행입니다.

The hard part is choosing the default shadows to include. I've spent probably 20 hours on the problem so far and still haven't come up with a good way to approach it. What are all the problems they solve, how many sizes do we need, do they need to support colors, etc.

기다리는 동안 무엇을 해야 할까요? 쉬운. 저희가 직접 하겠습니다.

Tailwind CSS에 텍스트 그림자 클래스 추가

tailwind.config.js에 다음을 추가합니다.

const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    extend: {
      textShadow: {
        sm: '0 1px 2px var(--tw-shadow-color)',
        DEFAULT: '0 2px 4px var(--tw-shadow-color)',
        lg: '0 8px 16px var(--tw-shadow-color)',
      },
    },
  },
  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') }
      )
    }),
  ],
}

그리고 그게 다야.

이제 text-shadow shadow-red-500를 쓸 수 있고 Tailwind CSS와 제로 사용자 정의 CSS로 완전히 생성된 아름다운 빨간색 텍스트 그림자가 나타납니다.

내가 한 모든 것은 adding plugins documentation을 따르는 것이었고 작동했습니다.

코드에 다음 Tailwind CSS 클래스가 추가되었습니다.

text-shadow

text-shadow-sm

text-shadow-lg

그러나 원하는 만큼 추가할 수 있습니다.

추가된 클래스는 예를 들어 text-sh와 같이 작성할 때 Tailwind CSS IntelliSense에 나타납니다.
var(--tw-shadow-color) 의 사용에 주목할 가치가 있습니다. 이것은 우리가 추가한 shadow-[color] 클래스와 함께 Tailwind CSStext-shadow 클래스를 사용할 수 있게 해주므로 중요합니다.

주목해야 할 또 다른 점은 다음과 같은 임의의 값을 사용할 수 있다는 것입니다. text-shadow-[0_4px_8px_#6366f1] 텍스트 그림자를 만듭니다.

더보고 싶어? Tailwind CSS 재생 샌드박스에서 full example을 볼 수 있습니다.