🍣

【フロント_3日目】Tailwind CSS_1冊目

2024/08/21に公開

こんにちは投資ロウトです。

 背景・諸事情があり、急いでTailwind CSSを学ぶ必要性に迫られています。

※Dockerも早急に学ぶ必要があり、並行で進めていきます。

※他の優先順位でstopする可能性あり

 テーマを設定するtainwind.config.jsはデフォルトのテーマであるクラスを提供しますが、themeプロパティを使うと、カスタマイズすることが可能とのこと。
旧Native Baseでも同じようなものもありますよね。
https://docs.nativebase.io/customizing-theme
theme.colors・・・Tailwind CSSで色を設定する場所
theme.spacing・・・空白の幅を変更する
theme.screens・・・ブレークポイントを変更する

 拡張機能VSCodeに、Tailwind CSS IntelliSenseというツールがあり、HTMLのclass属性を自動補完してくれるとのことです。
自動補完の様子
次にクラスの記載順序をソートしてくれるprettier-plugin-tailwindcssというツールがあるようです。導入方法は、
こちらでインストールを行い
npm install -D prettier prettier-plugin-tailwindcss
次にルート配下に「.prettierrc」を設置し
{
  "plugins": ["prettier-plugin-tailwindcss"]
}
上記を設置すると、ソースを保存した際に、自動的にソートしてくれました。

 マークアップTailwind CSSで気をつけるべきことは、クラスが長くなることではなく、似たようなクラスの集まりをコピペすることで、変更漏れが起きてしまうことを避けるというのが一つのお話でした。それが防げれば、クラスの並びや長すぎる改行などは問題ではないとのことです。
Reactであれば下記のようなループなどをし、複数を冗長に書かなくて済むようにすべきとのことです。
      <div>
        {items.map((item, index) => (
          <div key={index} className="flex items-center space-x-2">
            <div>
              {item.i}
            </div>
          </div>
        ))}
      </div>
動的にクラスを変えたい場合は、clasNamesというライブラリ等を使用すればいいとのことでした。
import classNames from 'classnames';

const buttonClass = classNames(
  'bg-blue-500',  // 常に適用されるクラス
  {
    'text-white': isFlag, // isFlagがtrueならクラスが適用される
  },
);

return <button className={buttonClass}>Click me</button>;

 基本的なユーティリティー・背景色・・・bg-から始まるクラスを使用

※bg-transparent(透明)やbg-current(文字色と合わせる)などもあるとのこと。
# 例
<div class="bg-cyan-500">投資ロウト</div>

# 例2(マウスオーバーなどもある)
<div class="bg-cyan-500 hover:bg-red-300">投資ロウト</div>
・文字色やサイズ・・・text-で始まるクラス

・ウェイトやフォント等・・・font-で始まるクラス
# 例 文字サイズ
<div class="text-sm>小さな投資ロウト</div>

# 例 文字サイズ
<div class="text-xl>見た目だけ大きな投資ロウト</div>

# 例 文字の太さ
<div class="font-bold>肥えてしまった投資ロウト</div>
と短いですが以上で学習を区切りたいと思います。ご精読ありがとうございました。焦らずコツコツ頑張っていきたいと思います。

背景

テーマを設定する

拡張機能

マークアップ

基本的なユーティリティー

Discussion