問題タブ [ruby-on-rails-7]

Rails 7 でこの新しいセットアップを実行して、追い風を組み込みました。

これは、tailwindui.com からこのコードを取得したときにうまく機能したように見えました。

私が試したすべてのコードサンプルのモバイルメニュー部分を除いて、すべてが完全に機能しているように見えました. ハンバーガーメニューはモバイルでは表示されません。動かない「×」マークしか出ません。私の理解では、Tailwind を使用した新しい Rails 7 のセットアップでは、すべてが構成されていると想定されていました。しかし、そうではないようです。

javascript.config.js:

パッケージ.json:

私が欠けているものを知っている人はいますか？

そこで、Tailwindcss と Postgres を使用して、まったく新しい Rails 7 プロジェクトを生成しました。

次に、見栄えの良い css を生成するタスク モデルを足場にしました。次に、scaffold html/css が垂直方向に引き出したので、インデックス ページを少し調整することにしました。個々のタスクが個々の行を形成する、より水平なレイアウトを目指しています。

Tailwind のドキュメントによると、各タスクにグリッドを使用できます。タスクに 3 つの属性があるため、3 列のグリッドを使用したいと考えました。

だから私grid gap-4 grid-cols-3は _task.html.haml に追加しました

ただし、属性を互いに下にレンダリングし続けます。

それをいじって、スタイルが反映されない理由を突き止めようとした後、codepen.io で html/css を複製しました。

そこでは、意図したとおりに完全にレンダリングされました。

私は何が欠けていますか？どんな助けでも感謝します。

開発モードではカスタム フォント (Raleway) が存在しますが、ステージング環境には反映されません。アプリを Heroku にデプロイしました。

application.rbに以下のコマンドを追加

application.bootstrap.scss に font-family を追加しました

フォント ファイルはmy_app/app/assets/fontsディレクトリにあります。

コマンドを使用してレールを作成しましたrails new my_app --javascript esbuild --css bootstrap --database postgresql

レール バージョン 7