Search code examples
ruby-on-railswebpackerpostcss

my tailwind utility class does not work in production


I found "Nirvana" (or should I say Tailwind) - it's just about how great I find this library/framework! It goes well with Rails - and Webpacker too. In fact, all is well except for this one bugger;

I've got this sneaky little contraption of mine affording quite readable view templates (and yeah - I know - it's obviously flawed in a million ways but it gets the job done, what can I say)

# helpers/menusHelper

  def sidebar_nav options=nil, &block
    opt = {
      :"x-show"=>"mobileSidebarOpen" ,
      :"aria-label"=>"Sidebar",  
      :"x-description"=>"Off-canvas menu, show/hide based on off-canvas menu state." ,
      :"x-transition:enter"=>"transition ease-in-out duration-300 transform" ,
      :"x-transition:enter-start"=>"-translate-x-full" ,
      :"x-transition:enter-end"=>"translate-x-0" ,
      :"x-transition:leave"=>"transition ease-in-out duration-300 transform" ,
      :"x-transition:leave-start"=>"translate-x-0" ,
      :"x-transition:leave-end"=>"-translate-x-full" ,
      :class => "absolute left-0 flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-premier-blue flex-shrink-0 h-full divide-y divide-cyan-800 overflow-y-auto top-12" ,
      :style => "display: none;"
    }
    opt.merge! options if options 
    content_tag :nav, nil, opt, &block
  rescue 
    content_tag :nav, nil, { class: "sidebar_nav error" }, &block
  end

Now - the issue is that it really works - except I don't get my 3rem of distance from top you see!

I have like - a lot - of utility classes and they all work (or at least I think they do)!

The class is untouched - in the web-site I can find the exact worthing on the nav tag;

Something - ehh - nah - well I don't know! It sits somewhere between the rails webpacker:compile and the git push dokku hermes

I'll report back if I stumble across an answer -


Solution

  • Sometimes the answer is right under your nose - as was the case at hand! I knew it had to do with something happening before I would start 'uploading' to the server and I had my eyes fixed on PostCSS; it certainly paid off!

    My tailwind.config.js tells PostCSS what files to vacuum - and it looked like this:

    
    module.exports = {
      purge: [
        './app/assets/**/*.js',
        './app/assets/**/*.coffee',
        './app/javascript/**/*.coffee',
        './app/javascript/**/*.js',
        './app/views/**/*.haml',
        './app/views/**/*.erb',
        './app/**/*.jsx',
      ],
    
    

    - but because I started down that 'invent these little helper things' I forgot to include *.rb files in the "shopping list" for PostCSS!

    This is how it has to look like - at least for what I'm doing:

    module.exports = {
      purge: [
        './app/assets/**/*.js',
        './app/assets/**/*.coffee',
        './app/javascript/**/*.coffee',
        './app/javascript/**/*.js',
        './app/views/**/*.haml',
        './app/helpers/*.rb',
        './app/views/**/*.erb',
        './app/**/*.jsx',
      ],