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

tailwindCSSのJIT modeについて
基本的な機能の説明

tailwindCSSのJIT modeの設定

tailwind.config.jsに mode: 'jit'を追記する

module.exports = {
  mode: 'jit',
  purge: {
...

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の問題の様子

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

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

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

・eslint-plugin-tailwindcssを利用する

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

tailwind JITモードを使う際の色々な記述方法に関して

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

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

5/25追記

versionの問題の様子

tailwind CSS
現状Ver2.1.2を利用しているが、そのうちver3にアップデートしたいのでメモ
tailwind3系のメモはここに残しておく

6/15追記

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

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

例えばextend外に

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

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

tailwind.cssのchrome向け拡張機能

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

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