90181


下記の環境で個人アプリ開発をしているのですが、tailwindcssのresponsive design機能がうまく機能しなくて困っています。  
開発環境は下記です。  
ruby '3.1.2'  
rails '7.0.2.4'  
tailwindcss-rails (2.0.8-x86_64-darwin)  
tailwindcss-rails (2.0.8-x86_64-linux)  
importmap-rails (1.0.3)  
`config/tailwind.config.js`は以下の通りになっています。

[code]

    const defaultTheme = require('tailwindcss/defaultTheme')
    
    module.exports = {
      content: [
        './app/helpers/**/*.rb',
        './app/javascript/**/*.js',
        './app/views/**/*.{erb,haml,html,slim}'
      ],
      theme: {
        screens: {
          'sm': '640px',
          // => @media (min-width: 640px) { ... }
    
          'md': '768px',
          // => @media (min-width: 768px) { ... }
    
          'lg': '1024px',
          // => @media (min-width: 1024px) { ... }
    
          'xl': '1280px',
          // => @media (min-width: 1280px) { ... }
    
          '2xl': '1536px',
          // => @media (min-width: 1536px) { ... }
        },
        extend: {
          fontFamily: {
            sans: ['Inter var', ...defaultTheme.fontFamily.sans],
          },
        },
      },
      plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/typography'),
      ]
    }
    
[/code]

ログイン後のnavbarを例に挙げます。  
`app/view/place/shared/_login_navbar.html.erb`というファイルを編集していますが、

[code]

    <!-- logo -->
      <div class="inline-flex">
        <%= link_to '/togo_inu_shitsuke_hiroba/top', class: "hidden md:block flex items-center" do %>
          <%= image_tag '***.png', class: "rounded-full w-10 h-10"%>
          <span class="ml-3 text-xl"><%= t'defaults.app_name' %></span>
        <% end %>
        
        <%= link_to '/togo_inu_shitsuke_hiroba/top', class: "block md:hidden flex items-center" do %>
          <%= image_tag '***.png', class: "rounded-full w-10 h-10"%>
        <% end %>
      </div>
      <!-- end logo -->
    
[/code]

ロゴマークの横に記載しているアプリ名をモバイル ~ sm時は消しておき、md ~時は表示したいのですが、  
上記の内容では画面サイズを変更してもずっとアプリ名が消えたままになってしまいます。  
サーバーを再起動させても効果はありませんでした。  
なぜ目論み通りにならないのか？ 何かお気づきになることがあればご教授いただきたく、よろしくお願いします。


CC BY-SA 4.0
2022-07-02T02:56:43.547
89719
2022-07-25T05:48:27.067
48234
question
ruby-on-rails tailwindcss
Rails7 tailwindcss-rails gem でresponsive breakpointが機能しない


本件、結局原因は分かりませんでしたがrails newからやり直したところ機能するようになりました。  
codeの部分は全てコピペしたので、内部設定の何処かがおかしくなっていたのだと思われます。


CC BY-SA 4.0
2022-07-25T05:48:27.067
90181
2022-07-25T05:48:27.067
48234
89719
answer