tailwind extra styles

[D-Forz]

The current pagy tailwind css wasn't working for me, I needed to change these lines:

a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;
    &:hover {
      @apply bg-gray-300;
    }

to this:

a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200 hover:bg-gray-300;
    ...

versions

• rails 7.1.3.2
• ruby 3.2.2
• tailwindcss-rails 2.5

[ddnexus]

How does the tailwind page of the demo app look?

[D-Forz]

It looks good with both configurations

[H-Hp]

It seems that you were facing an issue with the Tailwind CSS styles for the pagination links in your Rails application, and you found a solution by modifying the CSS styles.

The initial code block you provided:

a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;
    &:hover {
      @apply bg-gray-300;
    }
}

This code applies some base styles to the pagination links (a tags) using the Tailwind CSS utility classes. The &:hover part is a nested CSS selector that targets the hover state of the links and applies a different background color (bg-gray-300) when hovered.

However, in the modified version that worked for you:

a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200 hover:bg-gray-300;
}

Instead of using a nested selector, you combined the base styles and hover styles into a single line using the hover:bg-gray-300 utility class provided by Tailwind CSS.

The reason this modification worked could be related to the way Tailwind CSS handles nested styles or the specific versions of the libraries you're using (Rails 7.1.3.2, Ruby 3.2.2, and tailwindcss-rails 2.5).

Sometimes, there might be compatibility issues or differences in how the styles are processed, and a slightly different approach might be required to achieve the desired result.

In your case, the simplified version with the combined utility classes solved the issue, and the pagination links now have the correct background color on hover.

[D-Forz]

Would it be a good idea to include these details in the documentation? It might help other users avoid similar issues.

[ddnexus]

Sure, we will do it. Thank you.

[ddnexus]

Done: https://ddnexus.github.io/pagy/docs/api/stylesheets/#pagy-tailwind-css

[plizarraga]

I just created these styles inspired by flowbite, I hope it helps you:

Demo: Repo

File: application.tailwind.css

/* application.tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

.pagy {
  @apply inline-flex items-stretch -space-x-px;

  > *:first-child {
    @apply rounded-l-lg;
  }

  > *:last-child {
    @apply rounded-r-lg;
  }
}

.pagy a:not(.gap) {
  @apply flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300;

  &:hover {
    @apply bg-gray-100 text-gray-700;
  }

  &:not([href]) {
    @apply text-gray-300 bg-gray-100 cursor-default;
  }

  &.current {
    @apply flex items-center justify-center text-sm z-10 py-2 px-3 leading-tight text-primary-600 bg-primary-50 border border-primary-300;
  }
}

span.pagy.info {
  @apply text-sm font-normal text-gray-500;
}

File: tailwind.config.js

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js',
  ],
  plugins: [require('@tailwindcss/forms')],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eef2ff',
          100: '#e0e7ff',
          200: '#c7d2fe',
          300: '#a5b4fc',
          400: '#818cf8',
          500: '#6366f1',
          600: '#4f46e5',
          700: '#4338ca',
          800: '#3730a3',
          900: '#312e81',
          950: '#1e1b4b',
        },
      },
    },
    fontFamily: {
      body: [
        'Inter',
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'system-ui',
        'Segoe UI',
        'Roboto',
        'Helvetica Neue',
        'Arial',
        'Noto Sans',
        'sans-serif',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'Noto Color Emoji',
      ],
      sans: [
        'Inter',
        'ui-sans-serif',
        'system-ui',
        '-apple-system',
        'system-ui',
        'Segoe UI',
        'Roboto',
        'Helvetica Neue',
        'Arial',
        'Noto Sans',
        'sans-serif',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        'Noto Color Emoji',
      ],
    },
  },
};

Preview

[ddnexus]

Thank you for the new style. I pasted it in the demo playground app, in place of the original pagy style, but I get a very basic style, so I guess that there is something wrong in the style above.

Please, could you provide a modified demo app (which is already set up with tailwind)?

Thank you

[pokonski]

I noticed an issue that (for me) affects those Pagy custom styles and could be the source of problems reported by others here, see tailwindlabs/tailwindcss#14092

Nesting selectors merges them when minified, breaking styling. I use tailwindcss-rails which by default uses minification when precompiling assets for production.

[benkoshy]

Thanks for that. They've posted a bug fix.

[pokonski]

Yep this is now out as 3.4.8 version