jjranalli/nightwind

Picking up `even:` modifier

timvink opened this issue ยท 3 comments

nightwind is awesome! Thanks for developing this plugin and the clear documentation ๐Ÿ‘๐Ÿป

I'm using a table adapted from this example table, which breaks on the even rows.

Relevant line of HTML:

<tr class="border-b border-gray-200 even:bg-gray-50 hover:bg-gray-100">

Which looks fine in light mode:
image

But breaks in dark mode on the even rows:

image

I don't have a workaround yet, no luck yet with adding a class dark:even:bg-gray-700.

FYI, the workaround is not using the even: operator, but instead writing some javascript to insert a class on every even row (here's an example)

Hey @timvink, glad to hear you like Nightwind ๐Ÿ˜

About your issue, can you confirm me that you've added the even variant in the nightwind config in tailwind.config.js? It looks like nightwind is not generating the dark class you need. It should look something like this:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    nightwind: ["focus", "even"], // Add any Tailwind variant
  }
}

If this doesn't work, the quickest way for me to solve this is probably to have a look at a repro. Let me know!

Ahhh, I did miss that. I'm also new to tailwindcss. Thanks for the pointer, works perfectly!