Tailwind CSSの習作: Railsでの利用
外観
目的
Tailwind CSSをRailsで利用する手順を記載します。
環境
macOS 10.15.5
Ruby 2.7.1
Rails 6.0.3.1
Yarn 1.22.4
Node 13.12.0
tailwindcss@1.4.6
参照
リポジトリ
画面の準備
rails new try_tailwindcss
cd try_tailwindcss
rm -rf app/assets/stylesheets
app/assets/config/manifest.js
//= link_directory ../stylesheets .css を削除します。
//= link_tree ../images
bin/rails g controller Home index --skip-assets
config/routes.rb
Rails.application.routes.draw do
resources :home, only: :index
root 'home#index'
end
stylesheet_pack_tagへの変更
stylesheet_link_tagをstylesheet_pack_tagに変更します。
下記のようにapplication.cssを追加しapplication.jsから参照します。
app/javascript:
├── packs:
│ └── application.js
│ └── application.css
touch app/javascript/packs/application.css
※空ファイルのまま進めます。
app/javascript/packs/application.js
require("./application.css")を追加します。
app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./application.css")
app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
ファイル参照などのエラーが発生していないことを確認します。
bin/rails s
open localhost:3000
Tailwind CSSの導入
Installation
yarn add tailwindcss
app/javascript/packs/application.css
TailwindをCSSに追加します。
@tailwind base;
@tailwind components;
@tailwind utilities;
postcss.config.js
PostCSSの設定ファイルにtailwindcssとautoprefixerを追加します。
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
bin/rails s
open localhost:3000
Tailwind CSSの適用
実装例
app/views/home/index.html.erb
Alertsなどのサンプルコードを実装し動作を確認します。
Extracting CSS components with @apply
For small components like buttons and form elements, creating a template partial or JavaScript component can often feel too heavy compared to a simple CSS class.
In these situations, you can use Tailwind's @apply directive to easily extract common utility patterns to CSS component classes.
app/javascript/packs/application.css
@tailwind base;
@tailwind components;
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
@tailwind utilities;
app/views/home/index.html.erb
<button class="btn btn-blue">
Button
</button>
bin/rails s
open localhost:3000
Overmind (Procfile)の利用
webpack-dev-serverを利用する場合は、覚書: Overmindで用いたようにProcfileを用いたサーバの起動が便利です。
touch Procfile
rails: bundle exec rails s -b 0.0.0.0 -p 3000
webpack: bin/webpack-dev-server
overmind start
Production環境
production環境で動作確認します。
参照: Rails単体production環境での動作確認
Controlling File Size
未使用のCSSを削除します。
NODE_ENV=productionで実行してPurgeCSSを適用します。
./node_modules/.bin/tailwind init
tailwind.config.js
module.exports = {
purge: [
'./app/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
NODE_ENV=production RAILS_ENV=production bundle exec rails assets:precompile
RAILS_SERVE_STATIC_FILES=1 bundle exec rails s -e production
open localhost:3000
bin/rails assets:clobber
Heroku
念のためにHerokuでも動作確認しておきます。
git checkout -b heroku
bin/rails db:system:change --to=postgresql
bundle install
git add .
git commit
heroku login
heroku create <APP_NAME>
heroku addons:create heroku-postgresql
git push heroku heroku:master
# heroku run rake db:migrate
# heroku run rake db:seed
heroku open
heroku logs --tail
heroku apps:destroy
以上です。
この記事が気に入ったらサポートをしてみませんか?