背景

新しいアプリ(ボートフォリオ用)を作成のためTailwind CSSを導入に挑む
新たな技術を学んでサクサク作れるようになれればよき
今回もQiitaさんに投稿されている方々にお世話になりました、ありがとうございます

参考文献
Tailwind on Rails
RailsにTailwindCSSを導入

開発環境

Ruby 3.0.0
Rails 6.1.3.1
tailwindcss 2.0.4

作業工程

まずは@d0ne1sさんが投稿してくださった「Tailwind on Rails」の手順で進める

$ yarn add tailwindcss
$ yarn tailwindcss init
$ mkdir app/javascript/css
$ touch app/javascript/css/tailwind.css

app/javascript/css/tailwind.css

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

app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import "channels"

import '../css/tailwind.css'; // 追記

Rails.start()
Turbolinks.start()

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require("tailwindcss"),  // 追記
    require("autoprefixer"), // 追記
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

app/views/layouts/application.html.erb

// 削除　<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
// 追記　<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

これで準備は整ったはず!!
では動作確認を行うため準備を・・・・

app/views/tests/index.html.erb

<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/women/17.jpg" alt="Woman's Face">
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-tight">Erin Lindford</p>
      <p class="text-sm leading-tight text-gray-600">Customer Support Specialist</p>
      <div class="mt-4">
        <button class="text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">Message</button>
      </div>
    </div>
  </div>
</div>

動作確認

では準備が出来たので「rails s」っと
あ、うまくいってませんでした・・・・

うまくいくと下記のサイトに載ってる状態になるみたいです
RailsでTailwind CSSを使用する

作業工程2

次に@kazuya_minei109さんが投稿してくださったRailsにTailwindCSSを導入の手順も行う

デフォルトで入っているWebpackerを削除して、
新しいWebpackerを追加を実施

$ yarn remove @rails/webpacker
$ yarn add rails/webpacker#b6c2180

gem spring アンインストールを実施

$ bundle exec gem uninstall spring

# gem 'spring'  #念の為にコメントアウト

$ bundle install

次に、TailwindsCSS、PostCSS、Autopfrefixer、Tailwindプラグインをインストール

yarn add tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

この段階で動作確認を実施
rails sっと・・・・

上手くいってるな・・・・

少し調査

ここから場合分けで色々試してみた結果

デフォルトで入っているWebpackerを削除
新しいWebpackerを追加を実施
PostCSSのインストール

$ yarn remove @rails/webpacker
$ yarn add rails/webpacker#b6c2180
$ yarn add postcss

上記が必要であった
下記の
「tailwindcss」は既にインストール済であったこと
「autoprefixer」は postcss.config.jsに追記してあったこと
「@tailwindcss/〜」はtailwindsccのプラグイン各種をインストールすること
そのため、あまり関係ないかと思います

さいごに

PostCSSについても少し調べてみた
Rails & Webpacker環境でPostCSSを使う
しかし、理解が追いつきませんでした!!
少しずつ学んでいくしかないかな

参考文献

Tailwind on Rails
RailsにTailwindCSSを導入
 RailsでTailwind CSSを使用する
 Rails & Webpacker環境でPostCSSを使う

Rails 6にTailwindCSSを導入して失敗【メモ書き】

背景