【設計】Cloudflare Workers→Pages出戻り記 — OpenNextのTTFBが遅すぎた話
2026/3/20
【トラブルシューティング】Cloudflare Pages デプロイCI/CDで踏んだ地雷5選
2026/3/20
【設定・環境構築】Cloudflare Pages × Next.js のSSR応答を66倍高速化した全記録
2026/3/20
【設定・環境構築】OpenNext でNext.js SSGサイトをCloudflare Workersにデプロイする完全ガイド
2026/3/19
【実装】Notion calloutブロックをNext.jsでカラフルなUIコンポーネントとして表示する
2026/3/19
TailwindCSSをRailsに導入する方法について言及していきます。
PC : MacBook Air(M1,2020)
RAM : 8GB
OS : macOS Monterey(ver12.1)
Ruby : 3.1.2
Rails : 6.1.7
こちらの章では導入手順について説明していきます。
gem 'tailwindcss-rails'
bundle install
rails tailwindcss:install
基本的にファイルが自動生成、記述が追加されますが、念のため確認をします。
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
]
}
@tailwind base;
@tailwind components;
@tailwind utilities;
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
bin/dev
あとは自分が使いたいTailwindCSSのclassを適用させていくだけです。公式リファレンスで自分が適用したいclassを調べて実装してみましょう
今回の記事では、 既存のアプリケーションににTailwindCSSを導入 をする方法について説明しました
もし興味を持っていただけましたら、ぜひ他の記事も読んでいただけるとうれしいです！
(最後に、気づいた方もいらっしゃると思うのですが、絵文字を入れるのは苦手なので、文章に沿った絵文字を挿入するのに、ChatGPTを利用させていただきましたが、いかがでしたでしょうか。不快に思われた方がいたら申し訳ございません)
