なぜTailwind on Rails?
- クラス名を決める必要がなくなる
- クラス名の衝突がなくなり、BEMやCSS設計から開放される
- デザインの修正により不要になったCSSが残ってしまうことがなくなる
- どの要素にどんなスタイルが当たっているかがすぐにわかる
- カラーコードやフォントサイズ、ブレイクポイント等の統一性を保ちやすい
- ネット上に転がっているサンプルコードを気軽に取り入れやすい(他の人が書いたコードでもカスタマイズが楽)
- スタイルの修正のたびに
app/assets/stylesheets/任意のフォルダ/任意のファイルを開く必要がなくなる
環境
Rails 6.0.3
導入
$ yarn add tailwindcss
$ yarn tailwindcss init
$ mkdir app/javascript/css
$ touch app/javascript/css/tailwind.css
@import"tailwindcss/base";@import"tailwindcss/components";@import"tailwindcss/utilities";import'../css/tailwind.css';module.exports={plugins:[//...require("tailwindcss"),//追加require("autoprefixer"),//追加require("postcss-preset-env")({autoprefixer:{flexbox:"no-2009",},stage:3,}),],};動作確認
$ rails g controller test index
rootto: 'tests#index'<divclass="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden"><divclass="sm:flex sm:items-center px-6 py-4"><imgclass="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full"src="https://randomuser.me/api/portraits/women/17.jpg"alt="Woman's Face"><divclass="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left"><pclass="text-xl leading-tight">Erin Lindford</p><pclass="text-sm leading-tight text-gray-600">Customer Support Specialist</p><divclass="mt-4"><buttonclass="text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">Message</button></div></div></div></div>applyを使う
Tailwind CSSにはapplyという機能があり、複数のクラスをまとめて適用することができます。例えば同じボタンがあらゆる箇所に出現する場合、毎回font-bold py-2 px-4 rounded bg-red-500 text-white hover:bg-red-700などと書くのは大変なので、btnというクラスを指定するだけで上記のクラスを適用するためにapplyを使います。
TailwindをRailsで利用する場合applyを使用するのが難しいので、helper関数で対応することにします。
(こちらの記事ではRailsでapplyを使っているようですが、この通り設定するとapplyを適用した箇所以外のスタイルが効かなくなってしまいました)
$ rails g helper tailwind
moduleTailwindHelperdefbtn'fosnt-bold py-2 px-4 rounded bg-red-500 text-white hover:bg-red-700'endendclassApplicationController<ActionController::BasehelperTailwindHelperend<ahref='#'class='<%=btn%>'>ボタン</btn>懸念点
TailwindCSSでは、想定されうるあらゆるユーティリティークラスが用意されているので、他のCSSフレームワークよりファイルサイズが大きいです。
この問題を、PurgeCSSという機能を使いビルド時に実際に使われているクラスに関するスタイルだけを抽出する方法で解決しています。
しかしRails上でTailwindを使う場合、PurgeCSSが使えません。(正確には設定方法がわかりません。分かる方がいたら教えてください。)
そのため通常よりファイルサイズが大きくなってしまいます。
当初この点を懸念して、Tailwind on Railsは無理ではないかと考えていました。
Tailwindの公式サイトを確認したところ
Using the default configuration, the development build of Tailwind CSS is 1996kb uncompressed, 144.6kb minified and compressed with Gzip, and 37.kb when compressed with Brotli.
とあり、要はminify&gzip済で144.6kbとのこと。Bootstrapが22.1kbってことを考えるとまあ重いですが、許容範囲なんじゃないかと思っています。
gzipの設定、ブラウザにキャッシュさせる期間の設定、CDNの活用とかをちゃんとやっていればクリティカルではないでしょう。