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

はじめに

👋こんにちは！Web系の企業に勤務し、地方からフルリモート勤務をしている@takakouと申します🏙️✨

今回は、「【Rails6】 既存AppにTailwindCSSを導入しよう!」というテーマで記事をシェアします！📝

この記事を執筆しようと思った経緯としては、私自身が 既存のRails6のアプリケーションにTailwindCSSを導入する記事があまり見つからなかったからです 。💡

そこで、同じ疑問を持つ方の解消ができればと思い執筆しました🌟

記事執筆は未熟者で、至らない点もあるかと思いますが、皆さんのコメントやフィードバックをお待ちしています！🚀💬

目次

1. 対象者 👨
2. 動作環境 🖥️
3. 導入手順 🚀
4. 参考文献 📚
5. おわりに 🎉

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. 導入手順

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

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

Gemfileに記述を追加

Gemfile

+ gem 'tailwindcss-rails'

bundle install

Terminal

bundle install

TailwindCSSをinstall

Terminal

rails tailwindcss:install

ファイルの確認

基本的にファイルが自動生成、記述が追加されますが、念のため確認をします。

config/tailwind.config.js

+ 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'),
+  ]
+ }

assets/stylesheets/application.tailwind.css

+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

views/layouts/application.html.erb

    <%= 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が問題なく適用できるはずです。

Terminal

bin/dev

classを適用

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

4. 参考文献

5. おわりに

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

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

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