Closed fukasawamoe closed 1 year ago
画像のサイズ調整がしたいのであればわざわざtailwindを使わずにHTMLのsizeとかheightとかを使うのが良いのかなと思いました
コメントありがとうございます。 Tailwindのclassを使用できるのであれば、わざわざcssを増やさない方が綺麗コードがに書けると考えました。 最初の質問にも書いたのですが、すでにviewのコード内にcssを書いています。 ・現在cssはapp/views/shared_header.html.erbに書いています ・view内にcssを書きたくないためapp/assets/stylesheets/shared/_header.cssに書いたものの、これだとcssが反映されません。 stylesheetsに書いて反映さえるようにするにはどうすべきなのでしょうか。
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
コメントありがとうございます。 bin/rails assets:clobberにて無事にTailwindが再度適用されるようになりました! 挙げていただいたRailsガイドも再度確認します。ありがとうございました。
現在rails7 importmapを使用してアプリ制作を行っています
ヘッダーのロゴ画像のサイズをtailwindで適宜サイズ変更の操作ができるようにしたい
cssファイルを個別に入力して適用できるようにしたい(現状viewにベタ書きです)
jsファイルを個別に入力して適用できるようにしたい(現状viewにベタ書きです)
実現したいのは以下のようなデザインです
Tailwindのclassが効かないものが多すぎる(ほぼ効かないです)
アプリのロゴの画像に対して、サイズがちょうど合うようにtailwindで設定を行っているのですが
現状ほぼclassが適用されず大きいままのサイズになってしまいます。
TailwindPlayで適宜確認しながら実装を行なっているのですが、
仮に以下のように書いて以下の画像のように適応されることを期待しているのですが
実際は以下のようになってしまいます
チートシートにもこのclassが含まれていることを確認しました。
そのため、現在はCSSをベタ書きしています(stylesheets/_header.cssで作成したものの適用されませんでした、なぜでしょう…該当のソースコード以下にcssの設定を載せておきます)
tailwind.config.jsが最初はconfigファイル内にあったためルートディレクトリに移動しました
module.exports = {}の部分もカスタム設定を行いましたが適用されず
そもそものロゴ画像が大きいと思い縮小して追加しても変わらず
cssの設定を別ファイルで適用するように書いたが適用されず
アセットのコンパイルが必要かと考え
rails assets:precompile
を行なったが効果なし