너는 때때로 문자에 음영을 주고 싶다

  <div class="p-4 text-left m-4 shadow">
    <div class="text-shadow mb-2">この文字は、</div>
    <div class="text-shadow-md mb-2">だんだん、、</div>
    <div class="text-shadow-lg mb-2">浮いてきます。。</div>
    <div class="text-shadow-xl mb-2">お。。。</div>
    <div class="text-shadow-2xl mb-2">おおお！？</div>
  </div>

.text-shadow 같은 것은 사용자 정의 클래스입니다.

Tailwindcss로 제작합니다.

이런 느낌으로 5단계를 해야 한다.

.text-shadow

.text-shadow-md

.text-shadow-lg

.text-shadow-xl

.text-shadow-2xl

점점 떠올라 -2xl 절반은 악작극이다.
방법은 매우 간단하다. tailwind.config.js의 plugins 속성에 함수를 추가한다.

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [
    function({ addUtilities }) {
      const newUtilities = {
        ".text-shadow": {
          textShadow: "0px 2px 3px darkgrey"
        },
        ".text-shadow-md": {
          textShadow: "0px 3px 3px darkgrey"
        },
        ".text-shadow-lg": {
          textShadow: "0px 5px 3px darkgrey"
        },
        ".text-shadow-xl": {
          textShadow: "0px 7px 3px darkgrey"
        },
        ".text-shadow-2xl": {
          textShadow: "0px 10px 3px darkgrey"
        },
        ".text-shadow-none": {
          textShadow: "none"
        }
      };

      addUtilities(newUtilities);
    }
  ]
};

해설하면 plugins에 함수를 추가하고 그 매개 변수를 사용하는 addUtilities 방법일에 자신의 클래스를 추가한다.
이것밖에 없어요. 간단해요.

포장으로 공개합니다.

제작된 플러그인을 npm 공개하고 싶다면 다음과 같은 느낌이 든다.
패키지 이름을 tailwindcss-text-shadow-plugin 로 설정한 경우
index.js

module.exports = function({ addUtilities }) {
  const newUtilities = {
    ".text-shadow": {
      textShadow: "0px 2px 3px darkgrey"
    },
    ".text-shadow-md": {
      textShadow: "0px 3px 3px darkgrey"
    },
    ".text-shadow-lg": {
      textShadow: "0px 5px 3px darkgrey"
    },
    ".text-shadow-xl": {
      textShadow: "0px 7px 3px darkgrey"
    },
    ".text-shadow-2xl": {
      textShadow: "0px 10px 3px darkgrey"
    },
    ".text-shadow-none": {
      textShadow: "none"
    }
  };

  addUtilities(newUtilities);
};

이것index.js,package.json의main,publish를 하면

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [
    require('tailwindcss-text-shadow-plugin')
  ]
};

의 느낌으로 플러그인을 사용할 수 있습니다.
간단하면서도 좋아요.
마지막에 더 급하게 걸었어, 노장작처럼 전달했어?
여러분도 꼭 편리한 플러그인을 만들어서 공개하세요.
자기 클래스를 만드는 방법은 addComponents과addBase도 있다.자세한 내용은 이쪽으로 가세요. .  ↩