🔮

TailwindCSSで実装するグラデーション・シャドウまとめ

2024/03/20に公開

Tailwind CSS

tech

はじめに

この記事では、TailwindCSSでグラデーションやシャドウのついた要素を実装する方法を、background,border,textの3パターンで分けて解説します。

前提とする環境

Next.js(14),Typescript,TailwindCSS
TailwindCSS以外の場所は適宜読み替えてください！

グラデーション

1.background

TailwindCSSだけで完結するグラデーション

TailwindCSSだけで作成できるグラデーションの条件は、

グラデーションに使用されている色数が最大3色
であることです。
4色以上のグラデーションが作りたい場合は、次のセクションに進んでください！
3色までの線形グラデーションを作るのは簡単で、方向と色を指定するだけです。
r（right）, l(left), t(top), b(bottom)のおなじみ4つを組み合わせて方向が指定できます。
色は、from-（色名）、via-（色名）、to-（色名）で指定します。viaはオプションです。

<div className='bg-gradient-to-r from-green-400 via-cyan-900 to-blue-500'>

パッとコードを生成できるgeneratorサイトを見つけました。

放射グラデーション（radial gradient）が作りたい場合は、まだ対応するクラスが無いため、こちらのページの『Adding radial background gradients』にあるように、tailwind.config.tsに追記が必要です。

tailwind.config.ts

module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
      }
    }
  }
}

これだけでも放射グラデーションの表示は可能です。

<div className='bg-radial-gradient from-green-400 via-cyan-900 to-blue-500'>

しかし、実際にはグラデーションの開始・終了位置を指定したいケースが多いと思います。
以下のようにbg-[radial-gradient(開始位置,_var(--tw-gradient-stops))]で指定することができます。
開始位置は、ellipse_at_（ポジション）、circle_at_（ポジション）の2種類にボジション（top, bottom, left, right, center）を組み合わせます。
ellipse_at_bottom_leftのように2つ組み合わせることも可能です。

<div className='bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-green-400 via-cyan-900 to-blue-500'>

しかし、だいぶ長くなり読みにくくなってきました。
というわけで、次はCSSクラスでの解決です。

TailwindCSSで作成できないグラデーション

4色以上のグラデーションを作成したい場合は、別途CSSクラスを作成する必要があります。
以下のサイトなど、ジェネレータを活用するとプレビューを見つつ作成できて楽です！

width, heightは別途TailwindCSSで記載した方が汎用性が高いため、色味と色味が変わる位置のみ記載します。

globals.css

.sample-gradation {
  background-image: radial-gradient(
    at 0% 100%,
    rgba(255, 149, 63, 1),
    rgba(254, 93, 233, 1) 35%,
    rgba(160, 120, 249, 1) 70%,
    rgba(0, 141, 208, 1) 90%
  );
}

<div className='sample-gradation'>

すっきりしましたね！

2.border

borderを作りたい場合も基本的な考え方は1.と同じです。
例えば、ボタンのフチを囲むようなborderを作る場合は、以下のページのようにボタンサイズのdivの中に、ひとまわり小さいdivを重ねることでborderに見えるようにします。

先ほど作ったsample-gradationで実装すると概ね以下のようになります。

<div className='w-36 h-20 rounded-md sample-gradation p-1'>
  <div class="flex h-full w-full items-center justify-center bg-gray-800">
    <h1 class="text-2xl font-black text-white">Hello World</h1>
  </div>
</div>

3.text

textでもsample-gradationが使えます。
文字色として指定するのではなく、テキスト要素のbackgroundとしてグラデーションを指定して、それを文字でマスクする要領です。
以下のページに段階を踏んだチュートリアルがあります。

完成系はこちらとなります。

<h1 class="sample-gradation inline-block text-transparent bg-clip-text">hello world</h1>

これで様々なグラデーションを自在に作れますね！

シャドウ

1.background

box-shadow, drop-shadowなど、backgroundにつけるシャドウは公式情報が充実しているので、敢えてここで語る必要はなさそうです。
https://tailwindcss.com/docs/box-shadow

box-shadow, drop-shadow自体の違いをおさらいしたい方は、こちらをおすすめします！
https://kuzlog.com/2017/03/09/1255/

2.text

しかし一方で、text-shadowはまだTailwindCSSでサポートされてないため、次のページのような方法で自力で書く必要があります。

最もシンプルなのは、以下のようにtsxファイルで

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

のように書く方法です。
または

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

のように、色はTailwindCSSで指定することもできます。

毎度書くのが面倒な場合は、configファイルに以下を追加すると、

tailwind.config.ts

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') }
      )
    }),
  ],
}

box-shadowなどと同じ感覚で、text-shadow-smのように書けるようになります。

終わりに

ここまでお読みいただきありがとうございました。
TailwindCSSはとても便利ですが、時々今まで当たり前のように使っていたものがサポート外のことがあります。
今回はグラデーションやシャドウについてまとめてみましたが、何かお役に立てば幸いです！
誤りなどがあれば、ぜひお気軽にコメントいただければ幸いです！

はじめに

前提とする環境

グラデーション

1.background

TailwindCSSだけで完結するグラデーション

TailwindCSSで作成できないグラデーション

2.border

3.text

シャドウ

1.background

2.text

終わりに

Discussion