Rails, Propshaft, tailwind-rails and pagy

[janosrusiczki]

I have the setup from the title and I can't for the life of me have @pagy.series_nav styled.

I tried many things but I think I got closest when I tried adding Rails.application.config.assets.paths << Pagy::ROOT.join('stylesheets') to the pagy initializer and then @import "pagy-tailwind"; to app/assets/tailwind/application.css (which is the only file being built, otherwise Propshaft just passes CSS files through). But I'm getting: Error: Can't resolve 'pagy-tailwind' in '/home/janos/jmv/app/assets/tailwind' when trying to start the Rails server.

By the way, your AI helper on the docs page is also super confused, I told it I'm using v43 and it recommends:

<%== @pagy.series_nav(
  link_extra: 'class="text-blue-500 hover:text-blue-700"',
  active_link_extra: 'class="text-white bg-blue-500"',
  nav_extra: 'class="flex justify-center space-x-2"'
) %>

Gee thanks. 😠

[ddnexus]

It looks like a permission problem: please, print out the Pagy::ROOT.join('stylesheets') and verify that the file is in it and your app has the permissions to read it.

BTW you can just copy the file into the app and see how it goes...

Gee thanks. 😠

Oh man! Please could you send me the prompts of the chat with Pagy AI, so I will try to understand why and possibly improve that?

[janosrusiczki]

pry(main)> Pagy::ROOT.join('stylesheets')
=> #<Pathname:/home/janos/.rbenv/versions/3.4.7/lib/ruby/gems/3.4.0/gems/pagy-43.1.4/stylesheets>

~/jmv$ cat /home/janos/.rbenv/versions/3.4.7/lib/ruby/gems/3.4.0/gems/pagy-43.1.4/stylesheets/pagy-tailwind.css 
@tailwind base;
@tailwind components;
@tailwind utilities;
[ ... ]

I was able to have <%= stylesheet_link_tag "pagy-tailwind", "data-turbo-track": "reload" %> it was loading the file, but it was just passing it through.

I ended up copying the contents of pagy-tailwind.css into app/assets/tailwind/application.css and the pagination is styled now, but it's the default Pagy style. How can I use Tailwind's classes on the elements inside the <nav>? Do I have to go the template way? Sorry, I'm more of a backend developer, I'm lagging behind on modern CSS.

For the AI issue, I can't reproduce it anymore.

[janosrusiczki]

Passing the class names to the helper? Or styling the pagy elements with rules and CSS? Because you can do that just looking at the selectors in the pagy files, then you can style whatever you want.

Yes, that's what I want, either passing the styles to the helper or a way to add say rounded-md border border-slate-300 py-2 px-3 to each a inside nav.pagy.

Or I may have missed the point.

It's probably me, as I said I'm way behind on modern CSS. 😄

[ddnexus]

Do you mean changing the HTML structure and/or removing classes from a few element in the navs? Please, explain me the factual differences that you don't like and why, because I am not sure to get your point, and I think I consider the user A LOT.

[ddnexus]

dd say rounded-md border border-slate-300 py-2 px-3 to each a inside nav.pagy

I think you can just edit the provided CSS if you want to go manual. If you want to start from scratch, just empty everything (variables and rules)... leave only the selectors and the comments (that indicates what they are referring to).

This is the structure that allows to style everything:

.pagy {
}

.pagy > :not([hidden]) ~ :not([hidden]) {
}

.rtl .pagy > :not([hidden]) ~ :not([hidden]) {
  --space-reverse: 1;
}

.pagy a:not([role="separator"]) { /* all but gaps */
}

.pagy a[href]:hover { /* all links on hover */
}

.pagy a:not([href]) { /* all but links */
  cursor: default;
}

.pagy a[role="link"]:not([aria-current]) { /* disabled links */
}

.pagy a[aria-current] {  /* current page */
}

.pagy label {
}

.pagy label input {
}

The reason there are no classes is because the helpers are streamlined to be minimalistic, containing ONLY what makes them work, still providing the CSS files that address all their parts. Less clutter in helper, faster rendering, less bandwidth, same result.

Using the structure provided is like configuring a class name that you did not created, so it's unfamiliar in the same way, because somebody else did it. 🤷🏻‍♂️

[janosrusiczki]

Thanks, yeah, today I learned about @apply.

eg. in app/assets/tailwind/application.css

.pagy a:not([role="separator"]) { /* all but gaps */
  @apply rounded-md border border-slate-300 py-2 px-3;
}

It wasn't you, it was me. The one who tackles areas he doesn't really know about (CSS) at 2 AM. 😄