Open9

作業メモ(ライブラリ関連)

tailwindCSS JITmode

基本的な使い方
例えばboder-colorの設定であれば[]にカラーコードを囲んで、tailwindCSSを使うようにclassに設定すればいい
class="border-[#49B4F0]”
widthなども同様
class="w-[100px]"

tailwindCSS JITモードを設定している際にerrorが出るケース

commit時にTypeError: matchUtilities is not a functionが出る
prettierでerrorが出ているのでこの辺りに問題がありそう

下記を読んでいるとJIT modeとprettier-plugin-tailwindの問題の様子

https://github.com/tailwindlabs/tailwindcss/issues/4050

https://github.com/tqwewe/prettier-plugin-tailwind/issues/29

解決法として提示されているのは2つ
・tailwind.config.jsの記述を以下に変更する

module.exports = {
  mode: process.env.NODE_ENV ? 'jit' : undefined,
};

今回はこちらの方法を試し、Errorなしでcommitできた

eslint-plugin-tailwindcssを利用する

https://github.com/francoismassart/eslint-plugin-tailwindcss
こちらのプラグインを利用するとerrorを回避できるとのこと

この辺りのプラグイン導入については色々と考える必要があるかも

JITモード
boxshadowを設定したかったが、反映されなかった
shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]

colorの設定などは反映されたので、tailwindcssのバージョンの問題?
使用しているのはver2.1.2

5/25追記

https://tailwindcss.com/docs/box-shadow
ver3のページにはarbitrary valuesとして記載があるが、
https://v2.tailwindcss.com/docs/box-shadow
ver2には記載なし

versionの問題の様子

tailwind.config.jsに追記してプロパティを拡張して利用していたが、
ミスでextend外に書いていた

これをすると、新しく追記したプロパティだけが利用できる状態になり
tailwindデフォルトのプロパティを利用できなくなるので注意

例えばextend外に

      borderWidth: {
        3: '3px',
        6: '6px',
      },

を書くとtailwindのデフォルトにあるborder-2などが使えなくなる

tailwind.cssのchrome向け拡張機能

chromeのDevToolsにtailwindで設定されているプロパティが見れたり、
DevToolsから値を変えて確認できたりするツール

https://gimli.app/tailwinddx.html

6/21追記
インストールして確認してみた
ブラウザから色々とプロパティを触って変更できるのでその点は使いやすそう
JITモードで追加した部分?はツールの確認を通すと正しく表示されなくなったりするのでその部分が難点かも

作成者以外のコメントは許可されていません