simple_carenderのcssを適用できない

[39takagikouta]

お世話になっております。高木滉太です。

• 質問内容・実現したいこと
  gem simple_carenderでカレンダー機能を実装したいのですが、cssの当てかたがわかりません。
  公式によると、gemでこれをインストールした後、
  app/assets/stylesheets/application.cssファイルに「*= require simple_calendar」を追記するか
  app/assets/stylesheets/application.scssファイルに「@import "simple_calendar";」を追記することでカレンダーにレイアウトを当てることができると記載がありました。
  しかし、rails7でesbuildとtailwindCSSをオプションで設定してrails newしたのですが、その時に両ファイルは作成されず、自分で作成しても反映させることができません。
  調べたのですが、rails7は情報が少なく、gptも正確な回答をくれないため、苦戦しています。
  どのようにすれば反映させることができるでしょうか。

• 現状発生している問題・エラーメッセージ
  app/assets/stylesheets/application.cssまたは同フォルダのapplication.cssを作り、simple_carendeのレイアウトを反映させられない

• エラーから考えられる原因
  esbuildとtailwindを同時にオプションに設定したのが原因ではないかと思います。
  試しにesbuildだけオプションで設定したらapplication.scss ファイルが作成されていました

• 試したこと
  1gem "simple_calendar", "~> 2.4"をgemfileに記載しbundle install（バージョン指定なしでも試しました）

2app/assets/stylesheets/application.cssファイルを追加し、下記のコマンドを追記

/*

• This is a manifest file that'll be compiled into application.css, which will include all the files
• listed below.
• Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
• vendor/assets/stylesheets directory can be referenced here using a relative path.
• You're free to add application-wide styles to this file and they'll appear at the bottom of the
• compiled file so the styles you add here take precedence over styles defined in any other CSS
• files in this directory. Styles in this file should be added after the last require_* statement.
• It is generally better to create a new file per style scope.

*= require_tree .
*= require_self
*= require simple_calendar
*/

3app/assets/stylesheets/application.scssファイルを追加し、「@import "simple_calendar";」を追記

4app/assets/stylesheets/application.tailwindcss.scssファイルにも「@import "simple_calendar";」を追記

5以上を踏まえてbin/devするが、下記のviewファイルのコマンドにレイアウトが反映されない

<%= month_calendar do |date| %>
<%= date %>
<% end %>

[39takagikouta]

追記失礼します
オプションにesbuildだけでrails newしたアプリと、esbuildと加えてtailwindもオプションに設定した本アプリのcss関連の内容の差分を調べたところ、manifest.jsの「//= link_directory ../stylesheets .css」の記載が前者にはあるが後者にはないのが原因ではと考え、本アプリにもその文言を追加した上で、app/assets/stylesheets/application.scssを追加してbin/devしたら、以下のエラーが出たことを一応報告させていただきます。

[Tsuchiya2]

そもそもの確認ですが、tailwindcssは画面に反映されているのでしょうか。

tailwindcss+esbuild参考動画：https://www.youtube.com/watch?v=JsNtLiph87Y

上記動画が参考になるかもしれませんので、simple_carenderを入れる前にその組み合わせで最適な状態になっているのか確認してみてください。

[Tsuchiya2]

参考：excid3/simple_calendar#309

↑を参考にapplication.tailwind.cssを以下のように書き換えたら画面に表示されましたので、試してみたりしてください。

@tailwind base;
@tailwind components;
@tailwind utilities;

.simple-calendar table {
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 0px;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgb(221, 221, 221);
  border-collapse: collapse;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

.simple-calendar tr {
  border-collapse: collapse;
}

.simple-calendar th {
  padding: 6px;
  border-bottom: 2px solid rgb(221, 221, 221);
  border-collapse: collapse;
  border-left: 1px solid rgb(221, 221, 221);
  border-right: 1px solid rgb(221, 221, 221);
  border-top: 0px none rgb(51, 51, 51);
  box-sizing: border-box;
  text-align: left;
}

.simple-calendar td {
  padding: 6px;
  vertical-align: top;
  width: 14%;
  border: 1px solid #ddd;
  border-top-color: rgb(221, 221, 221);
  border-top-style: solid;
  border-top-width: 1px;
  border-right-color: rgb(221, 221, 221);
  border-right-style: solid;
  border-right-width: 1px;
  border-bottom-color: rgb(221, 221, 221);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgb(221, 221, 221);
  border-left-style: solid;
  border-left-width: 1px;
}

.simple-calendar .calendar-heading nav {
  display: inline-block;
}

.simple-calendar .day {
  height: 80px;
}

.simple-calendar .today {
  background: #FFFFC0;
}

.simple-calendar .prev-month {
  background: #DDD;
}

.simple-calendar .next-month {
  background: #DDD;
}

[39takagikouta]

土屋講師、ご回答ありがとうございます！
夜分遅くに失礼いたします。

教えていただいた動画を見た結果、私の設定と異なっている点は見られなかったし、実際私のアプリではtailwindもdaisyUIも動いているので、設定に問題はないと思います。

application.tailwind.cssに教えていただいた文言を追加した結果、カレンダーにスタイルが反映されました。
助かりました、ありがとうございました！