tailwind

意外な指定方法：

独自の値を使いたい時

w-[600px] とする。この方法（[···]）は他の場合も同様に使えるっぽいが、tailwindの思想（themeを基本とする）からすると例外の使用方法だと思う。

と思ったらshadcnで生成されるコンポーネントで普通に使ってた。上書き出来るので問題ないが。

tailwind.config.jsにプロパティを追加して使う。

オリジナルデザインの場合には多様しそう。

module.exports = {
  theme: {
    extend: {
      // グリッド
      gridTemplateColumns: {
        "layout": "auto 360px"
      }
    }
  }
}

hoverの指定。

mediaを指定したので何もせずにシステムと連動するかと思ったが、それだけでは動かなかった。Remixだからか、なにか足りていないのか。。。

tailwindの機能拡張でクラスの中身を参照してくれる。

ホバーでクラス名の定義を参照出来る
https://gyazo.com/c6d5aea9b5d281c8640d013c52ac7719

入力時にも値を確認できる
https://gyazo.com/f4279e43346873c686b1abc2b5161d37