tailwindcssのプラグインを使って、文字に影をつける

文字に影つけたいときありますよね

  <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で作る

こんな感じで、５段階つくるとします。

• .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')
  ]
};

という感じで、プラグインを適用することができます。

シンプルでいいですね。

最後の方が急ぎ足でルー大柴みたいになってましたが、伝わったでしょうか。

皆さんもぜひ、便利なプラグインを作って、公開しましょう。

---

1. 独自のクラスを作成する方法は、このほかにもaddComponentsやaddBaseがあります。詳しくはこちらへどうぞ。 ↩