💨
Rails+TailwindCSSをRubyMineやIntelliJで使うときのバグ対策と設定

2024/10/22に公開
Rails
 はじめに表題の通り、TailwindCSSを使ったRailsプロジェクトをIntelliJで使うときに、自動補完に不具合がありましたので、原因を分析して、暫定的な解決方法を見つけましたので下のビデオで紹介します。
なお、バグレポートを出しましたし、私以前に出していた方もいましたので、近いうちに修正されると期待しています。

 TL;DRRailsにTailwindCSSをインストールする方法は、今のところ公式なものが２つあります

tailwindcss-rails gemを使う方法: Nodeをインストールせず、standaloneのtailswindcssを使用します。rails new --css tailwindをやったときはこっちが使われます

cssbundling-rails gemを使う方法: Nodeをインストールし、npmバージョンのtailwindcssを使用します

JetBrainsのTailwindCSS pluginはnpmバージョンのtailwindcssを使用しますが、standaloneのtailwindcssは使ってくれないようです => 自動補完が効いてくれません
tailwindcss-rails gemを使っている場合は、開発環境用にだけnpmバージョンのtailwindcssをインストールすれば自動補完が使えます

 その他デフォルトの設定だとtailwindcssは下記のようにview helperのclassを自動補完してくれません。
link_to "Hoge", "/hoge", class: "bg-orange-600 border rounded p-1"
これを自動補完してもらうためには、下記のところのclassRegexを追加します。
  "experimental": {
    "configFile": null,
    "classRegex": [
      "\\bclass:\\s*'([^']*)'",
      "\\bclass:\\s*\"([^\"]*)\""
    ]
  }

 ビデオhttps://youtu.be/VApt9up_ZRI

 最後にtailwindcss-rails gemを使うとプロダクション用のDockerfileにnodeをインストールする必要がなく、スッキリしていて気持ち良いです。
開発マシンはどっちみちnodeがインストールされているので負担があまりなく、我慢できるのですが、それでもJetBrainsがなるべく早く修正版のTailwindCSSプラグインを用意していくれることを期待しています！
はじめに

TL;DR

その他

ビデオ

最後に

Discussion
