Tailwind css not rendering tailwind ui components properly using ruby on rails

I am using tailwind css along with tailwind ui's prebuilt components for rails 7 project.

I installed tailwind as per their ruby on rails guide - https://tailwindcss.com/docs/guides/ruby-on-rails

Some of the utility classes seem to be working. Like i can change the colour of my nav links using the utilty classes but whenver I try to copy some of the prebuilt components from tailwind ui, it does not render correctly

This is what the body of my application should look like

This is what it currently looks like

These are some of my files below my application.tailwind.css

@import "tailwindcss/base";

@import "tailwindcss/components";


@import "tailwindcss/utilities";



/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

my config/tailwind.css

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*',
    './app/views/**/*.{erb,haml,html,slim}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ]
}

my application.html.erb

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kickconnect</title>
    <%# <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> %>

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>


    <%= javascript_importmap_tags %>
  </head>

  <body class="prose mx-auto" >
    <%= render partial:'home/newheader' %>
   
    <div class=>
    <%=notice%> 
     <%= yield %>
    </div>
    
    <%# <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> %>
  </body>
</html>

I've pretty much tried everything to get it to work but it wont render properly. I tried running './bin/dev.', doesnt change a thing

Solution

Precompiled assets do not change when you make changes to your files. bin/rails assets:precompile is for production, you don't need to run it in development. bin/rails assets:clobber removes precompiled assets.

The rest are details you probably don't need, but are useful to know:

bin/dev is equivalent to:

# bin/dev

foreman start -f Procfile.dev

That will start your rails server and tailwind watcher that compiles your css on any file change:

# Procfile.dev

web: bin/rails server
css: bin/rails tailwindcss:watch[debug]

The css: part just goes through rails and runs a rake task from tailwindcss-rails gem which in turn runs the underlying tailwind command:

tailwindcss -w -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/tailwind.css -c config/tailwing.config.js

Which is why you're including stylesheet_link_tag "tailwind" in your layout and not "application".

<link rel="stylesheet" href="/assets/tailwind-9c64e6c4285db52078d6a7537e9e32ee60f6d54c2e68fea533ea2b196e6c8aa9.css" data-turbo-track="reload">

There are two places this request ^ could be handled. First is ActionDispatch::Static middleware (see bin/rails middleware) which servers files from public directory. These assets take priority and will be served first. Second is sprockets engine, which is mounted in your routes.

bin/rails assets:precompile - you only do this for production deployment. It will compile all of your assets and put them in public/assets (these should be handled by your webserver, eg nginx). Files in public/assets do not update when you make changes to your files, unless you run precompile again.

bin/rails assets:clobber - just removes public/assets directory.

Now that you don't have that directory, your asset requests can hit sprockets engine which will compile assets on the fly and serve new and updated assets. This way when you make changes, your assets are always updated, in this case it is the updated tailwind.css file.

Also to be clear app/assets/stylesheets/application.tailwind.css is first compiled by tailwind to do the tailwind magic, then app/builds/tailwind.css is picked up by sprockets to hook it into rails lifecycle.