ヘッダーのtailwindが思うように効かない、cssを書いても効かない

[fukasawamoe]

現在rails7 importmapを使用してアプリ制作を行っています

• 質問内容・実現したいこと

ヘッダーのロゴ画像のサイズをtailwindで適宜サイズ変更の操作ができるようにしたい

cssファイルを個別に入力して適用できるようにしたい（現状viewにベタ書きです）

jsファイルを個別に入力して適用できるようにしたい（現状viewにベタ書きです）

実現したいのは以下のようなデザインです

• 現状発生している問題・エラーメッセージ

Tailwindのclassが効かないものが多すぎる（ほぼ効かないです）

アプリのロゴの画像に対して、サイズがちょうど合うようにtailwindで設定を行っているのですが

現状ほぼclassが適用されず大きいままのサイズになってしまいます。

• どの処理までうまく動いているのか

TailwindPlayで適宜確認しながら実装を行なっているのですが、

仮に以下のように書いて以下の画像のように適応されることを期待しているのですが

<header class="flex justify-between items-center h-20 p-6 border-y-2">
    <div class="w-60 h-16">
      <a href="/">
        <img src="https://placehold.jp/3d4070/ffffff/655x183.png" />
      </a>    
    </div>

実際は以下のようになってしまいます

#view/shared/_header.html.erb
<header class="flex justify-between items-center h-20 p-6 border-y-2">
  <% if logged_in? %>
    <div class="w-60 h-16">
      <%= link_to home_path(current_user.id) do %>
        <%= image_tag 'yoriyoi_logo.png' %>
      <% end %>
    </div>
  <% else %>
    <div class="w-60 h-16">
      <%= link_to root_path do %>
        <%= image_tag 'yoriyoi_logo.png' %>
      <% end %>
    </div>
  <% end %>

チートシートにもこのclassが含まれていることを確認しました。

そのため、現在はCSSをベタ書きしています（stylesheets/_header.cssで作成したものの適用されませんでした、なぜでしょう…該当のソースコード以下にcssの設定を載せておきます）

• 該当のソースコード

<header class="flex justify-between items-center h-20 p-6 border-y-2">
  <% if logged_in? %>
    <div class="logo">
      <%= link_to home_path(current_user.id) do %>
        <%= image_tag 'yoriyoi_logo.png' %>
      <% end %>
    </div>
  <% else %>
    <div class="logo">
      <%= link_to root_path do %>
        <%= image_tag 'yoriyoi_logo.png' %>
      <% end %>
    </div>
  <% end %>
  <% if logged_in? %>
    <nav class="z-10">
      <button id="button" type="button" class="fixed z-10 top-6 right-4">
        <i id="bars" class="fa-solid fa-bars fa-2x "></i>
        <i id="xmark" class="fa-solid fa-xmark fa-2x hidden"></i>
      </button>
        <ul id="menu" class="z-0 fixed top-0 left-0 w-full text-center bg-purple-200 translate-x-full transition ease-linear">
          <li class="p-3"><%= link_to 'スケジュールを作る', new_schedule_path %></li>
          <li class="p-3"><%= link_to 'スケジュールの確認・編集', schedules_path %></li>
          <li class="p-3"><%= link_to 'マイページ', profiles_path %></li>
          <li class="p-3"><%= link_to 'ログアウト', logout_path, class: 'nav-link', data: { turbo_method: :delete ,turbo_confirm: 'ログアウトします' } %></li>
        </ul>
    </nav>
  <% else %>
    <nav>
      <div>
        <a><%= link_to 'ユーザー登録', sign_up_path, class: 'p-3' %></a>
        <a><%= link_to 'ログイン', login_path, class: 'p-3' %></a>
        <a><%= link_to 'お問い合わせ', "#", class: 'p-3' %></a>
      </div>
    </nav>
  <% end %>
  </header>
  <main>

    <script>
      button.addEventListener('click', event => {
        bars.classList.toggle('hidden');
        xmark.classList.toggle('hidden');
        menu.classList.toggle('translate-x-full');
      })
    </script>
  </main>
  <style>
    .logo {
      width: 198px;
      height: 55px;
    }
  </style>
</header>

• 試したこと

tailwind.config.jsが最初はconfigファイル内にあったためルートディレクトリに移動しました

module.exports = {}の部分もカスタム設定を行いましたが適用されず

そもそものロゴ画像が大きいと思い縮小して追加しても変わらず

cssの設定を別ファイルで適用するように書いたが適用されず

アセットのコンパイルが必要かと考えrails assets:precompile　を行なったが効果なし

[kenchasonakai]

画像のサイズ調整がしたいのであればわざわざtailwindを使わずにHTMLのsizeとかheightとかを使うのが良いのかなと思いました

[fukasawamoe]

コメントありがとうございます。 Tailwindのclassを使用できるのであれば、わざわざcssを増やさない方が綺麗コードがに書けると考えました。 最初の質問にも書いたのですが、すでにviewのコード内にcssを書いています。 ・現在cssはapp/views/shared_header.html.erbに書いています ・view内にcssを書きたくないためapp/assets/stylesheets/shared/_header.cssに書いたものの、これだとcssが反映されません。 stylesheetsに書いて反映さえるようにするにはどうすべきなのでしょうか。

[kenchasonakai]

Tailwindのclassを使用できるのであれば、わざわざcssを増やさない方が綺麗コードがに書けると考えました。

そもそもTailswindが使えないのがおかしいと思うのですが、bin/rails tailswind:watchのようなコマンドは実行してますでしょうか？ まず、Procfile.devの記述を確認してtailwindのコマンドが書いてあるか確認し、書いてあったらサーバーを一度落として

bin/rails assets:clobber
bin/dev

で起動してTailwindが反映されないか確認してみてください ついでにバージョン等によっても使えるclassは変わると思うのでチートシートではなく公式ドキュメントに使用したいclassが存在するかも確認すると良いかと思います

それでもTailwindがうまく反映されずcssを読み込んで使いたい場合は Railsガイドのアセットパイプラインの章を確認してみてください https://railsguides.jp/asset_pipeline.html

[fukasawamoe]

コメントありがとうございます。 bin/rails assets:clobberにて無事にTailwindが再度適用されるようになりました！ 挙げていただいたRailsガイドも再度確認します。ありがとうございました。