Rails7でtailwindcss-stimulus-componentsを使用したタブ化

# はじめに
個人開発のアプリ制作をしています。
調べながらの実装になるので、メモとして記載しています。

※注意※
プログラミング学習中の初心者です。
記述に間違いがあれば、ご指摘いただけますと幸いです。


# 環境
Mac M1
rails 7.0.7.2
ruby 3.2.0
Node.js 20.2.0
Yarn 1.22.19

# やったこと

## ①tailwindcss-stimulus-componentsのインストール
```
$ yarn add tailwindcss-stimulus-components
```
npmを使用している場合は、下記でもインストール可能です。
```
$ npm install tailwindcss-stimulus-components
```
## ②importmapに記述を追加
下記コードを打つと、importmapにtailwindcss-stimulus-componentsが追加されます。
```
$ bin/importmap pin tailwindcss-stimulus-components  
```
config/importmap.rb
```
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.2.2/dist/stimulus.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin "tailwindcss-stimulus-components", to: "https://ga.jspm.io/npm:tailwindcss-stimulus-components@4.0.4/dist/tailwindcss-stimulus-components.module.js"
pin_all_from "app/javascript/controllers", under: "controllers" ,preload: true
pin "modal", to: "modal.js", preload: true

```

## ③コンポーネントをインポート
今回はタブを使用したかったので、公式の通り下記を追記しました。
```
import { Tabs } from "tailwindcss-stimulus-components"
application.register('tabs', Tabs)
```
app/javascript/controllers/application.js
```
import { Application } from "@hotwired/stimulus"

const application = Application.start()

import { Tabs } from "tailwindcss-stimulus-components"
application.register('tabs', Tabs)

// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application

export { application }
```

## ④viewに記述する
下記公式ドキュメントの内容を自分のアプリに合わせて、サーバーを再起動したら終わりです。
```
<div data-controller="tabs" data-tabs-active-tab-class="-mb-px border-l border-t border-r rounded-t">
  <ul class="list-reset flex border-b">
    <li class="-mb-px mr-1" data-tabs-target="tab" data-action="click->tabs#change">
      <a class="bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-700 font-semibold no-underline" href="#">Active</a>
    </li>
    <li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change">
      <a class="bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-700 font-semibold no-underline" href="#">Tab</a>
    </li>
    <li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change">
      <a class="bg-white inline-block py-2 px-4 text-blue-500 hover:text-blue-700 font-semibold no-underline" href="#">Tab</a>
    </li>
    <li class="mr-1">
      <a class="bg-white inline-block py-2 px-4 text-gray-300 font-semibold no-underline" href="#">Tab</a>
    </li>
  </ul>

  <div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
    Tab panel 1
  </div>

  <div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
    Tab panel 2
  </div>

  <div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/y3niFzo5VLI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>
```
実際に実装したものはこちらです。
[![Image from Gyazo](https://i.gyazo.com/8d04b2527c83841adc7d1a84b90bfd67.gif)](https://gyazo.com/8d04b2527c83841adc7d1a84b90bfd67)
```
<div class="flex flex-wrap justify-center">
  <div class="card w-full max-w-4xl mx-4 mb-8 shadow-2xl">
    <div data-controller="tabs" data-tabs-active-tab-class="border tabs tabs-lifted">
      <div class="flex justify-end">
        <ul class="list-reset flex border-b">
          <li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change">
            <a class="tab font-semibold">目標一覧</a>
          </li>
          <li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change">
            <a class="tab font-semibold">本日のタスク</a>
          </li>
        </ul>
      </div>
        <div class="hidden px-4 border-l border-b border-r" data-tabs-target="panel">
              <div class="card-body">
                <div class="font-bold text-center text-2xl">目標</div>
                <% if @goals.present? %>
                  <div id="goals">
                    <%= turbo_frame_tag "goals" do %>
                      <%= render @goals.select{ |g| !g.checked? } %>
                    <% end %>
                  </div>
                <% end %>
              </div>
        </div>

        <div class="hidden px-4 border-l border-b border-r" data-tabs-target="panel">
          <%= turbo_frame_tag "tab2_content" do %>
            <%= render "tasks/tab2" %>
          <% end %>
        </div>
      </div>
  </div>
</div>
```

## 終わり
importmapへの記述などが分からず、苦戦してしまいました。
今後使用する時に困らないようにまとめました。




# 参考

https://github.com/excid3/tailwindcss-stimulus-components/blob/1ba935f4256e40a3602c88e30f3db77ae50624c0/docs/tabs.md

https://github.com/excid3/tailwindcss-stimulus-components