Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: v5 table hover not working currently #3362

Open
sebastian-struecker opened this issue Jan 4, 2025 · 1 comment
Open

bug: v5 table hover not working currently #3362

sebastian-struecker opened this issue Jan 4, 2025 · 1 comment

Comments

@sebastian-struecker
Copy link

sebastian-struecker commented Jan 4, 2025

What version of daisyUI are you using?

v5.0.0-beta.1

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://github.com/sebastian-struecker/simple-feature-toggles/tree/main/src/main/webui

Describe your issue

Hello,
i am using the v5 beta version in a Nextjs project with the Tailwind 4 beta. The hover className is having no effect for me.
I tried different themes already.

Here is my setup:

global.css:

@import "tailwindcss";

@plugin "daisyui" {
    themes: emerald --default;
    exclude: rootscrollgutter, scrollbar;
}

@plugin "daisyui/theme" {
    name: emerald;
    prefersdark: false;
    color-scheme: light;
    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 0.5rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 1;
}


:root {
    --max-width: 1100px;
    --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
}

html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
  daisyui: {
    themes: ["light", "emerald"],
  },
}

table in a .tsx file

<div className="overflow-x-auto flex justify-center">
  <table className="table table-lg">
    <thead>
      <tr>
       <th>One</th>
       <th>Two</th>
      </tr>
      </thead>
      <tr className="hover hover:cursor-pointer">
       <td>1</th>
       <td>2</th>
      </tr>
  </table>
 </div>

A workaround is to manually set the background color on hover like e.g.: hover:bg-base-200

Copy link

github-actions bot commented Jan 4, 2025

Thank you @sebastian-struecker for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant