kt-tech.blog

読み込み中...

最新記事

カテゴリー

トラブルシューティング設定・環境構築実装設計学習メモ技術勉強会日常

アーカイブ

目次

概要
1. 対象者
2. 動作環境
端末
バージョンなど
3. 導入手順
Gemfileに記述を追加
bundle install
TailwindCSSをinstall
ファイルの確認
アプリケーション再起動
classを適用
4. 参考文献
5. おわりに

2023年10月7日

Ruby Rails TailwindCSS

【Rails6】既存AppにTailwindCSSを導入しよう!

Share

概要
1. 対象者
2. 動作環境
端末
バージョンなど
3. 導入手順
Gemfileに記述を追加
bundle install
TailwindCSSをinstall
ファイルの確認
アプリケーション再起動
classを適用
4. 参考文献
5. おわりに

概要

TailwindCSSをRailsに導入する方法について言及していきます。

1. 対象者

Rails6の既存AppにTailwindCSSを導入したい方

2. 動作環境

端末

PC : MacBook Air(M1,2020)
RAM : 8GB
OS : macOS Monterey(ver12.1)

バージョンなど

Ruby : 3.1.2
Rails : 6.1.7

3. 導入手順

こちらの章では導入手順について説明していきます。

📌

前提

📌

公式のリファレンスを参考にしています。

Install Tailwind CSS with Ruby on Rails

https://tailwindcss.com/docs/guides/ruby-on-rails

Gemfileに記述を追加

gem 'tailwindcss-rails'

bundle install

bundle install

TailwindCSSを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' %>

アプリケーション再起動

📌

注意点

📌

アプリケーション起動中のままの人は再起動してください。buildされるのでアプリケーション再起動後にはTailwindCSSが問題なく適用できるはずです。

bin/dev

classを適用

あとは自分が使いたいTailwindCSSのclassを適用させていくだけです。公式リファレンスで自分が適用したいclassを調べて実装してみましょう

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

https://tailwindcss.com/

4. 参考文献

Install Tailwind CSS with Ruby on Rails

https://tailwindcss.com/docs/guides/ruby-on-rails

kt-tech.blog - 技術と創造性が交わる場所

https://kt-tech.blog/blogs

5. おわりに

今回の記事では、 既存のアプリケーションににTailwindCSSを導入 をする方法について説明しました

もし興味を持っていただけましたら、ぜひ他の記事も読んでいただけるとうれしいです！

(最後に、気づいた方もいらっしゃると思うのですが、絵文字を入れるのは苦手なので、文章に沿った絵文字を挿入するのに、ChatGPTを利用させていただきましたが、いかがでしたでしょうか。不快に思われた方がいたら申し訳ございません)

関連記事

すべて見る

【Next.js】検索結果にサムネイル画像を設定する方法

【Next.js】検索結果にサムネイル画像を設定する方法

2024年9月9日

【Cloudflare】お名前.comから Cloudflare Registrarにドメイン移管をする

【Cloudflare】お名前.comから Cloudflare Registrarにドメイン移管をする

2024年8月15日

【Ubuntu24.04LTS】DNS永続化設定

【Ubuntu24.04LTS】DNS永続化設定

2024年6月25日