tailwind.config.jsのカスタマイズについて

[kagomen]

概要

tailwind.config.jsのカスタマイズについて、ここで話し合いや情報共有できればと思って立てました🎨

関連するイシュー

各自でTailwind CSSを書いていくので、Webページが大体完成したらCSSの整理を行う #62

[kagomen]

使用するカラーを完全に縛るかどうか
Tailwind CSS のカスタマイズ方法 -Zenn

[pss-aileen]

なるほど！
theme > color で定義すると定義した色だけになるんですね！
TailwindのCSSを使いつつ、カスタムカラーを追加したい場合は theme > extend > colors なんですね！

[kagomen]

まとめてくださり、ありがとうございます🙏
そうみたいです！
今回のプロジェクトだと赤・白・黒だけで構成できそうな感じもしますし、theme > colorで縛っても良い気もしましたー！

[kazzyfrog]

なんとなく、以下のように進めていくと、Tailwindの理解深められそうな気がしています！

1. Tailwindを使って、デザインカンプ通りにUIを実装
2. tailwind.config.js をカスタマイズして、より柔軟に管理しやすくする
3. CSS変数や、必須級のTailwind系ライブラリを使う
4. shadcn/uiを導入する

[kagomen]

ロードマップ……！
ありがとうございます🙏✨

[kagomen]

kazzyfrogさんの上記のロードマップに則って、こちらのスレッドの対象を「Tailwind全般」から「tailwind.config.jsのカスタマイズ」に変更しても良いかなと思いました！

CSS変数や、必須級のTailwind系ライブラリを使う
shadcn/uiを導入する

ここらへんは情報量が膨大になる気がするので、configのカスタマイズが落ち着いてきたら適宜新しいスレッドを立てるという感じで……！

[kazzyfrog]

良いと思います！

[kagomen]

設定すること、あまりない気がする！
→今のところカラーの設定くらい？

あとは（必要なら）ブレークポイントを変えるくらいでしょうか？

[pss-aileen]

思ったより設定すること、今少なそうですね...笑
ブレイクポイントも変えなくて良いような気がしています...！🥹
Responsive Design - Tailwind CSS
こちらにしたがう感じで良いのかなと