bug:
Nnadroj opened this issue · 6 comments
What version of daisyUI are you using?
v4.10.2
Which browsers are you seeing the problem on?
All browsers
Reproduction URL
https://play.tailwindcss.com/kN6Eqgon19
Describe your issue
The loading is not working as you can see on the play.tailwindcss.com
Thank you @Nnadroj
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.
className is not a valid HTML attribute. It's for React. Use class instead and it works:
https://play.tailwindcss.com/tnSw1R6rkE
- <span className="loading loading-spinner loading-xs"></span>
+ <span class="loading loading-spinner loading-xs"></span>Let me know if you have a question.
I am using react
So the problem must be something else (your Tailwind config maybe) because the class name is working as you can see here
Also here's a working React example:
https://stackblitz.com/edit/daisyui-react-vite-eaybqz?file=src%2FApp.jsx
here is my tailwind config, do you see anything that could create a conflict ?
`import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./pages//*.{js,ts,jsx,tsx,mdx}",
"./components//.{js,ts,jsx,tsx,mdx}",
"./app/**/.{js,ts,jsx,tsx,mdx}",
],
theme: {
screens: {
xs: "410px",
xm: "500px",
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
"3xl": "1700px",
},
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
fontFamily: {
"Acumin-pro": ["acumin-pro, sans-serif"],
},
},
},
plugins: [],
};
export default config;
`
Not a conflict. But maybe content is not addressing to the file which is using the class name.
I can't guess what is the issue unless you share a minimum reproduction link where I can see the class name is not working. You can use Stackblitz for that.