pagy - tail wind extra?

[benkoshy]

Is it a ridiculous idea to add support for a pagy tailwind extra?

Why?

Tailwind is predicated on in-line styles - allowing for easy cusotmisation of css in-line. The current approach is to use add a custom css file pagy.css with tailwind specific styles. This works well enough: yet it feels contrary to the tailwind way of doing this, and becomes tricky if customization is necessary. The following must be altered in order go get customized styling:

.pagy-nav,
.pagy-nav-js {
  @apply flex space-x-2;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page a,
.pagy-nav-js .page.active,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply block rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
  &:hover{
    @apply bg-gray-300;
  }
  &:active{
    @apply bg-gray-400 text-white;
  }
}

.... etc. etc.

How would you customize the above styles, with the pagy_nav template to acheive the desired outcome? Is not a trivial operation IMO.

However, with a tailwind specific extra - and with healthy default options - this allows for a much easier time with customizing specific styling.

What does everyone think?

[ddnexus]

Not sure I get the point of this. Maybe I am missing something here.

How would you customize the above styles, with the pagy_nav template to acheive the desired outcome?

What about using exactly the same CSS, which applies to all pagy output?

How would you write an extra when you actually need a CSS file?

[ddnexus]

Adding this comment as the starting point of the discussion that led to the current implementation.

[benkoshy]

What about using exactly the same CSS, which applies to all pagy output?

The reason I'm suggesting is because: it's not the "tailwind" way. The philosophy is to break away from separate css stylesheets.

It's also difficult / tricky to style / customize - one must apply a style which corresponds to the markup. Without a tool, it's not easy. Perhaps I may write a tool to do the job?

How would you write an extra when you actually need a CSS file?

tailwind uses many utility classes - these could be added in an extra, much like the bootstrap extra, with sensible defaults. The benefit is that it allows for super easy customization, without tooling.

my two cents.

[ddnexus]

The reason I'm suggesting is because: it's not the "tailwind" way.

I thought that @apply was the most amazing tailwind way to override some existing style, as @excid3 explained here, but my knowledge might certainly be outdated. Has @apply been deprecated?

The philosophy is to break away from separate css stylesheets.

We are providing a snippet to paste and customize in your own app. No "separate CSS stylesheet" here, unless you want to. Just a standard override.

It's also difficult / tricky to style / customize - one must apply a style which corresponds to the markup. Without a tool, it's not easy.

I don't see that. You just apply whatever you want to the existing pagy classes that are not going to change (at lest during a major version). You just open the browser dev-tools and inspect interactively what they refer to. I find that very easy, and the users are used to that already. No special documentation to write or learn.

Perhaps I may write a tool to do the job?

Sure, you are welcome to write your own extra and link it to the official pagy repo.
However, unless @apply is officially deprecated, I don't see the need to write, test, document and maintain another core extra ATM.