Next.js (6): TailwindCSSのClass & Modifier紹介(Dark modeなど)
概要
今回はこれらのデザインを利用します。前回の記事に続けてtailwindCSSで有用なClass、modifierを紹介したいと思います。
ZennのArticlesのダークモード
IKEAの商品リストのカード
Dark mode
ZennのArticleのダークモードを作ってみました。
(tailwindCSSで提供するカラーセットで作ったので、色の組み合わせがやや不自然ではあります。。😞)
Dark modeの判断はデフォルトはパソコンのセッティングやブラウザに合わせて判断します。
classNameでDark modeをつけたい場合 darkMode: "class", を追加します。
これでclassNameに darkを追加するとその配下の要素はDark modeになります。便利！
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リポジトリにあげておきましたのでよかったらみてください。
Author And Source
この問題について(Next.js (6): TailwindCSSのClass & Modifier紹介(Dark modeなど)), 我々は、より多くの情報をここで見つけました https://zenn.dev/redpanda/articles/171f846b00d999著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol