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


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

**参考文献**
[Tailwind on Rails](https://qiita.com/d0ne1s/items/5a2cf50167afd988e9f7)
[RailsにTailwindCSSを導入](https://qiita.com/kazuya_minei109/items/e76ff2b0af49e69eb441)

##開発環境
- Ruby 3.0.0
- Rails 6.1.3.1
- tailwindcss 2.0.4

##作業工程
まずは@d0ne1sさんが投稿してくださった「[Tailwind on Rails](https://qiita.com/d0ne1s/items/5a2cf50167afd988e9f7)」の手順で進める

```
$ 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」っと
あ、うまくいってませんでした・・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215137/a3b9848b-4f96-75ef-cd35-46287c69083e.png)
うまくいくと下記のサイトに載ってる状態になるみたいです
[RailsでTailwind CSSを使用する](https://qiita.com/tabakazu/items/4c152de6e9a2c293d1f2)

##作業工程2
次に@kazuya_minei109さんが投稿してくださった[RailsにTailwindCSSを導入](https://qiita.com/kazuya_minei109/items/e76ff2b0af49e69eb441)の手順も行う

デフォルトで入っている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っと・・・・
![スクリーンショット 2021-03-29 11.25.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215137/0e17c7b3-3362-c688-f1b1-aef945dd208f.png)

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

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

- デフォルトで入っている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を使う](https://qiita.com/yamashun/items/587e487a885a5291e3a2)
しかし、理解が追いつきませんでした!!
少しずつ学んでいくしかないかな



## 参考文献
[Tailwind on Rails](https://qiita.com/d0ne1s/items/5a2cf50167afd988e9f7)
[RailsにTailwindCSSを導入](https://qiita.com/kazuya_minei109/items/e76ff2b0af49e69eb441)
[RailsでTailwind CSSを使用する](https://qiita.com/tabakazu/items/4c152de6e9a2c293d1f2)
[Rails & Webpacker環境でPostCSSを使う](https://qiita.com/yamashun/items/587e487a885a5291e3a2)