rails6にTailwind CSSを導入する方法

Rails6 * Tailwind CSS

1 gem

gem 'tailwindcss-rails'

$ bundle install

$ bundle exec rails taildwindcss:install

2 app/javascript/css/tailwindcss.css

app/javascript/css/tailwindcss.cssファイルを新規作成し、以下のようにする

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

3 app/javascript/packs/application.js

app/javascript/packs/application.jsファイルに以下の記述を追記する

import "../css/tailwindcss.css";
import "stylesheets/application"

4 app/views/layouts/application

app/views/layouts/applicationファイル内のstylesheetをlinkからpackに変更する

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>