みなさん、tailwind使ってますか？
恥ずかしながら私ゆすけは実務案件で触れるまで、名前すら聞いたことがありませんでした。（これをきっかけに勉強しようと決意）
初めて触れてからは特定のクライアントからの依頼は全てtailwindで制作することになったので、月に2~3サイトくらいをフルでtailwindを使って開発しています。
今回はそんなtilwindの初期設定のお話です。
tailwind.config.jsでtailwindを拡張していくっ！
CDNの読み込みだけで使用する場合はあまり関係がないと思いますが、node.js等で開発環境を作っている人の場合はtailwind.configを使うことで自分が開発しやすく拡張していくことができます。
（この辺りはまだまだ理解し切れていないので、間違いがあればコメントでお願いします）
僕の場合は外注で制作する時くらいしかtailwindを使っていないので、基本的には依頼元の環境に馴染む形で拡張をするので、基本的には簡単な拡張しかしていませんがそれでもかなり便利にコーディングをすることができます。
カラー設定、フォント設定をしておくだけでもOK
普段のコーディングでsassを利用している人であれば（$font-color）か、cssの変数（–font-color:）を利用してカラー設定やフォント設定などをしていると思います。
tailwindの場合、CDN利用ではなくnode.js等でビルドして使う場合はtailwind.config.jsに上記のような変数を設定することができます。
（ビルドの環境構築については割愛します）
普段僕が利用するのはこんな感じで設定しています。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./resources/assets/scss/**/*.scss", "./resources/**/*.ejs"],
theme: {
extend: {
fontFamily: {
ttl: ['Zen Kaku Gothic Antique','sans-serif'],
main: ['Zen Kaku Gothic New', 'sans-serif']
},
colors: {
theme: {
main: '#008742',
font: '#333333',
bg: '#FCF5E9',
// accent: '',
// link: '',
}
},
},
screens: {
'sp': {'max': '767px'},
'pc': "768px",
},
},
plugins: [],
}設定するときに少しハマったのがfont-familyに複数設定する方法。
ttl: [‘Zen Kaku Gothic Antique’,’sans-serif’],
最初は訳が分からなくて、この部分を ttl: ‘Zen Kaku Gothic Antique’,’sans-serif’, と記述していたのですが今となっては当たり前にエラー出る構文ですね。笑
カンマ演算子が途中に入っているので ttl: ‘Zen Kaku Gothic Antique’, と ’sans-serif’, が別物として判断されています。
一つのキーに対して複数のfont-familyを設定する場合は配列[…]にして組むか、ダブルクォーテーションとシングルクォーテーションを組み合わせるとうまく動きます。（ttl: “‘Zen Kaku Gothic Antique’,’sans-serif'”,）
まとめ
普段からjsを使っている人であれば全く問題にならないと思いますし、僕も今は問題なく理解していますが、初めて使う人やjsに不慣れな人にとってはハマりそうだと思ったので備忘録がわりに共有します。
今後react.jsやnext.jsも本格的に学んでいこうと思っているので、こういった開発環境側（nodeやbun）の知識、tailwindとも仲良しこよしになれるようにしなくてはいけませんね。