Document styling

[philnash]

Styling is currently done with CSS classes, document how this works.

Consider ways to make it easier to style like other components in Astro.

[jsnape]

I had to wrap the control in a div with class="pagination" and do the styling like:

.pagination ul {
    display: inline-flex;
}

.pagination ul li {
    margin-right: 20px;
}

but it seems a little clunky. I would love to use tailwind classes instead of custom css.

[philnash]

I know I haven't added to this recently, but I have been considering the best way to make this stylable, with Tailwind as well.

[ryo-kihara]

@philnash

Why not add the following statement?

packages/astro-pagination/src/components/Pagination.astro

I used the following page from Astro as a reference.

https://docs.astro.build/en/guides/styling/#passing-a-class-to-a-child-component

I don't know if this can be achieved with Tailwind CSS...

[philnash]

@ryo-kihara That is a good start, but it only affects the <nav> element. I need a solution that is going to allow classes to be added to all the elements in the pagination.

I'm considering whether you should be able to pass components that will be used in place of the default that is currently in use. So you could create the pagination like this:

<Pagination page={page} urlPattern={"/blog/page/{}"} nav={MyNavPagination} link={MyLinkComponent} />