RailsにTailwindCSSを導入 

# はじめに
今回はRailsアプリにTailwindを導入するための手順を書いていきます。  
[こちらの記事](https://davidteren.medium.com/tailwindcss-2-0-with-rails-6-1-postcss-8-0-9645e235892d)の手順に沿って進めていきます。    


# バージョン
紹介した記事の中ではそれぞれ

```
ruby        3.0.0
rails       6.1
```

以上のバージョンで構成されています。が
私の環境は

```
ruby        2.6.6
rails       6.1.3
```

といった感じで記事の通りのバージョンではないのですが、この環境でも概ね記事の通りにすすめることが出来ました。(エラーはあったものの)
ですので、少なくとも私の環境のバージョン以上であれば問題なく導入できるかと思います。

## 導入手順
記事の中では新しいアプリケーションを作成するところから触れられていますが、
私は既存のアプリケーションに導入しましたので最初の方の手順は少し省きます。

 - デフォルトで入っているWebpackerを削除

```
yarn remove @rails/webpacker
```

 - 新しいWebpackerを追加

```
yarn add rails/webpacker#b6c2180
```

 - Gemfileに以下のgemがあることを確認

```
gem 'webpacker', '~> 5.0'
```
<br>
記事の中ではアプリケーション作成時に`--skip-spring`オプションをつけています。
webpack-dev-serverを使用するため、spring gemが必要なくなるからです。
既存アプリであれば既にインストールされているはずなので、

 - 記事に合わせるためにこちらはアンインストールしておきましょう。

```
bundle exec gem uninstall spring
```
```gemfil:Gemfile
 gem 'spring'   #削除
```
```
bundle install
```
これでOKです。

<br>

 - TailwindsCSS、PostCSS、Autopfrefixer、Tailwindプラグインをインストール。

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

 - app/javascript/stylesheetsにapplication.scssを作成。

```
mkdir app/javascript/stylesheets && touch app/javascript/stylesheets/application.scss
```

 - application.scssに以下を追加。

```scss:app/javascript/stylesheets/application.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

 - app/javascript/pack/application.jsに以下を追加。

```js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

require("stylesheets/application.scss")  //追加

Rails.start()
Turbolinks.start()
ActiveStorage.start()
```


 - postcss.config.jsに以下を追加。

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


 - app/views/layouts/application.html.erbに以下を追加。
 
```erb:app/views/layouts/application.html.erb
<head>
.
.
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>  <!--追加-->
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" %>  <!--追加-->
.
.
</head>
```

 - TailwindCSSの設定ファイルを生成。
 
```
npx tailwindcss init --full
```


 - 生成されたtailwind.config.jsにプラグインを追加
 
```js
const colors = require('tailwindcss/colors')

module.exports = {
  .
  .
  plugins: [
    require('@tailwindcss/forms'),   //追加
    require('@tailwindcss/typography'),  //追加
    require('@tailwindcss/aspect-ratio'),   //追加
  ],
}
```


 - tailwind.config.jsにフォントの設定を追加。
 
```js
.
.
.
    fontFamily: {
      sans: [
        'Inter var',   //追加
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        '"Noto Sans"',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
.
.
.
```

ここまでで記事で紹介されている導入の手順は終了です。  

<br>
<br>

## テスト
ここからは導入したTailwindが正常に動作してくれるかテスト用のページを作成してテストしていきます

テスト用のコントローラーとページを生成します。
今回必要なのはコントローラーとビューだけですので、
オプションで不要なファイルの生成をスキップするようにします

```
rails g controller Home index --no-assets --no-helper --no-test-framework --skip-routes
```
Viewには以下のコードを貼りつけます  

```erb:app/views/home/index.html.erb
<div class="font-sans bg-white h-screen flex flex-col w-full">
 <div class="h-screen bg-gradient-to-r from-green-400 to-blue-500">
  <div class="px-4 py-48">
   <div class="relative w-full text-center">
    <h1
     class="animate-pulse font-bold text-gray-200 text-2xl mb-6">
    Your TailwindCSS setup is working if this pulses...
    </h1>
   </div>
  </div>
 </div>
</div>
```
いまだけルートパスを変更しておきましょう

```rb:config/routes.rb
root 'home#index'
```


このテスト用に作成したページを確認するためにコマンドを実行していきます。

```
bin/webpack-dev-server
```

### 発生したエラー
ここで私の環境では以下のエラーが発生しました。

```
Error: Cannot find module 'webpack-cli/bin/config-yargs'
```  

環境によってはすんなりいくかもしれませんが、私の場合の解決方法を書いておきます。  
[こちらの記事](https://zenn.dev/fuuukeee3/articles/ab4189779b6602457742)を参考にさせていただきました。
記事内で解説されている原因などについては理解が足りず、 
私の記事内で説明することは出来ません、申し訳ありません。
ここでは簡潔に解決の手順のみ記させていただきます。
package.jsonを書き換えます

```json:package.json
{
.
.
  "devDependencies": {
    "webpack-cli": "^3.3.12",   //追加
    "webpack-dev-server": "^3.11.2"
  }
}
```

そして以下のコマンドを実行します

```
npm install webpack-cli --save-dev
```

## 再度テスト
インストールが終わったら先程のコマンドを実行し、サーバーも立ち上げましょう

```
bin/webpack-dev-server
rails s
```

http://localhost:3000 にアクセスすれば[記事](https://davidteren.medium.com/tailwindcss-2-0-with-rails-6-1-postcss-8-0-9645e235892d)の中で見れるような青いエフェクトのページが表示されるはずです。

以上導入とテストの手順でした

<br>
<br>

# まとめ
今回は既存のRailsアプリケーションにTailwindCSSを導入するための手順を記事の内容に沿って紹介しましたが、
途中起こったエラーについてもよくわかっていない辺り、Webpakerなどに対する理解が浅いと感じています。
今後はその辺りを深く掘り下げていきたいと思います。
最後まで読んでくださりありがとうございました。

<br>
<br>

# 参考にした記事
[TailwindCSS 2.0 with Rails 6.1](https://davidteren.medium.com/tailwindcss-2-0-with-rails-6-1-postcss-8-0-9645e235892d)

[Error: Cannot find module 'webpack-cli/bin/config-yargs'の対処法](https://zenn.dev/fuuukeee3/articles/ab4189779b6602457742)

[rails generate controller で不要なファイルを生み出さないために](https://qiita.com/k_kibi/items/09f717f5a83d41b5f30a)