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 -
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',
],