TailwinPlay does not recognize "bg-primary" class name

[zemian]

Hi,

I tried on TailwindPlay with a simple Card here: https://play.tailwindcss.com/IiCmZ5EuXm and the "bg-primary" is not working. While the same html works as expected in CodePen with CDN css files: https://codepen.io/zemian/pen/jOBrpvR. Is there some configuration I need to enable to use these schematic role names in TailwindPlay?

[saadeghi]

Hi, You need to add colors to the config this way

module.exports = {
  plugins: [
    require('daisyui'),
  ],
  theme: {
    extend: {
      colors: require('daisyui/colors')
    },
  },
}

Reason:
DaisyUI adds colors to Tailwind if it finds tailwindcss installed as a dependency, If it can't find tailwindcss, it shows a warning on console, telling you how to extend color (like the code above)
You can't see the console log in Tailwind Play unless you open the browser console tho 😅
This functionality allows us to import colors by default, but if you don't have the tailwindcss installed as a dependency (if you're using a fork or a similar project with different name) you can still use the colors.

I will update the Tailwind Play example link in the docs. Thanks!

[zemian]

Ah, I see it works with your updated config now. Thanks!

Yes, updating the example config in your site's link (the one show at the bottom of your home page. eg: https://play.tailwindcss.com/RcIZd1Mwho) would be good for beginners so they don't think it's broken.

BTW, I think DaisyUI is a pretty cool project! I feel the the Tailwind can be pretty verbose on styling common UI components, and DaisyUI's built-in schematic role names make it easier to get started and be productive. I like how I can further customize the UI with direct Tailwind utility classes! This is pretty awesome. Keep up the good work!