✨

Next.js (6): TailwindCSSのClass & Modifier紹介(Dark modeなど)

2022/04/09に公開

CSS

概要

今回はこれらのデザインを利用します。前回の記事に続けてtailwindCSSで有用なClass、modifierを紹介したいと思います。

ZennのArticlesのダークモード

IKEAの商品リストのカード

Dark mode

ZennのArticleのダークモードを作ってみました。
(tailwindCSSで提供するカラーセットで作ったので、色の組み合わせがやや不自然ではあります。。😞)

Dark modeの判断はデフォルトはパソコンのセッティングやブラウザに合わせて判断します。
classNameでDark modeをつけたい場合 darkMode: "class", を追加します。
これでclassNameに darkを追加するとその配下の要素はDark modeになります。便利！

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class", //default media
  plugins: [],
};

https://tailwindcss.com/docs/dark-mode

modifier

hover時のCSS反映も簡単に作れます。hoverの後ろにhoverした時のclassを追加するだけです。

hover

hover:bg-cyan-600

<button className="rounded-full bg-blue-700 p-3 shadow-xl transition-colors hover:bg-cyan-600">

その他にも、focus: formでdisable:required:など、様々なmodifierを提供するのでドキュメントをご参考ください

https://tailwindcss.com/docs/hover-focus-and-other-states

ring

アウトラインのリングを表示する時に利用します。focusされた時にringが表示されます。

ring-black: ringの色
ring-offset-2: ringと要素との間隔を開ける
ring-2: ringの幅

<div className=" bottom-0 right-4 space-x-2">
  <button className="h-5 w-5 rounded-full bg-black ring-black ring-offset-2 transition focus:ring-2"></button>
  <button className="h-5 w-5 rounded-full bg-amber-400 ring-amber-400 ring-offset-2 transition focus:ring-2"></button>
  <button className="h-5 w-5 rounded-full bg-teal-500 ring-teal-500 ring-offset-2 transition focus:ring-2"></button>
</div>

https://tailwindcss.com/docs/ring-width
https://tailwindcss.com/docs/ring-color
https://tailwindcss.com/docs/ring-offset-width
https://tailwindcss.com/docs/ring-offset-color

Configuration

tailwindCSSで提供する基本設定ではなく、カスタムすることもできます。

例えば

yellow色を別の彩度のyellow色にしたい
フォントを変えたい
widthを70%がほしい

以下のように設定できます。例えばwidth: 70%はw-70/100 のように利用できます。

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      spacing: {
        "70/100": "70%",
      },
      colors: {
        yellow: "#ffc82c",
      },
      fontFamily: {
        sans: ["Graphik", "sans-serif"],
        serif: ["Merriweather", "serif"],
      },
    },
  },
  darkMode: "class", //default media
  plugins: [],
};

https://tailwindcss.com/docs/configuration

animation

animate-pulseを利用することで要素を柔らかくfadeさせます。

<button className="animate-pulse p-2">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="h-7 w-7 stroke-blue-700"
    fill="none"
    viewBox="0 0 24 24"
    strokeWidth="2"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
    />
  </svg>

ほかにもロードの表示に有用なクルクルさせるanimate-spin メッセージ表示に有用な animate-pingなどが提供されています。

https://tailwindcss.com/docs/animation

まとめ

紹介したclass以外にも様々なclassがあるので公式ドキュメントをご参考ください。

最初はclass名に慣れなくて覚えられず開発がくなると感じられるかもしれませんが、何回か繰り返して使うと、よく使うclassはすぐ覚えらます。
また、前回の記事で紹介した自動で補完してくれるvscodeのextension「Tailwind CSS IntelliSense」とtailwindCSS チートシートを並行して使うと、より効率良くデザインできると思います。

ソースコードは私のgitリポジトリにあげておきましたのでよかったらみてください。

概要