TailwindCSSでfont-familyってどうやって設定するの？っとなったので、調べたことを書いておきます。
TailwindCSSの環境構築・導入方法は、もりけん先生のTailwindCSSハンズオンの記事を参考にしています！
もりけん先生のブログはこちら↓
https://kenjimorita.jp/tailwindcss-vite/
tailwind.config.jsに記述を追加する
まず、tailwind.config.jsを開きます。font-familyは、themeのfontFamilyに定義します。FontFamilyに、フォントの名前をつけて、使いたいフォントを定義します。
このようにすると、font-body というクラスが作られ、HTML側で使うことができるようになります。
module.exports = {
content: [
'./index.html',
],
theme: {
extend: {},
fontFamily: {
body: [
'Hiragino Sans',
'ヒラギノ角ゴシック',
'メイリオ',
'Meiryo',
'MS Ｐゴシック',
'MS PGothic',
'sans-serif',
'YuGothic',
'Yu Gothic',
],
}
},
plugins: [],
}<body class="font-body">
<div class="m-12 text-center">フォントの名前は、bananaとかringoとか、任意のものでオッケーです。この場合、HTML側で使うクラス名が、font-banana,font-ringoになります。
fontFamily: {
banana: ['MS Ｐゴシック','MS PGothic','sans-serif'],
ringo : [ 'Hiragino Sans','ヒラギノ角ゴシック','メイリオ','Meiryo'],
}<body class="font-banana">
<div class="m-12 text-center">Google Fontsなどの外部フォントを読み込みたい場合
CSSのファイルに、インポートします。下記のように記述します。
@import url("https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: Proxima Nova, system-ui, sans-serif;
}
}読み込んだフォントを、tailwind.config.jsに記述します。
module.exports = {
content: [
'./index.html',
],
theme: {
extend: {},
fontFamily: {
zenKurenaido: ['Zen Kurenaido', 'sans-serif']
}
},
plugins: [],
}<h1 class="font-zenKurenaido">TaillwindCSS DEMO</h1>読み込みできました！
<body class="font-zenKurenaido">
<div class="m-12 text-center">font-familyとメディアクエリを組み合わせることもできる
特定のブレークポイントで、font-familyを切り替えることもできます。TailwindCSSにはデフォルトで、一般的なブレークポイントが用意されています。
// tailwind.config.js
module.exports = {
theme: {
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }
'md': '768px',
// => @media (min-width: 768px) { ... }
'lg': '1024px',
// => @media (min-width: 1024px) { ... }
'xl': '1280px',
// => @media (min-width: 1280px) { ... }
}
}
}こんな感じにブレークポイントでフォントの切り替えをすることができます。
<p class="font-body sm:font-banana md:font-body lg:font-banana xl:font-ringo">ブレークポイントはthemeのscreensに定義します。好きな名前にすることもできます。
module.exports = {
theme: {
screens: {
tablet: '640px',
// => @media (min-width: 640px) { ... }
laptop: '1024px',
// => @media (min-width: 1024px) { ... }
desktop: '1280px',
// => @media (min-width: 1280px) { ... }
},
}
}min-widthとmax-widthを同時に指定することもできます。
module.exports = {
theme: {
screens: {
'sm': {'min': '640px', 'max': '767px'},
'md': {'min': '768px', 'max': '1023px'},
'lg': {'min': '1024px', 'max': '1279px'},
'xl': {'min': '1280px'},
},
}
}以上です！
さくっとTailwindCSSを使って作ってみたもの。グラデーションなどがサクッとできすぎて、驚きました。
TailwindCSSを使うと、複数のfont-familyやブレークポイントをまとめて定義できて、とても便利ですね！まだ、使い始めたばかりですが、JavaScript課題でもガンガン使っていこうと思います！
