Tailwind CSS 'group' property not working with border color-CodePudding

I'm trying to add a border color to a button inside of my main div , my code looks like this:

      <div className=" group w-full flex justify-between border border-white border-solid rounded-15px px-10 items-center ">
          <button className="text-2xl flex rounded-22px border border-solid border-white py-4 px-6 my-6 items-center bg-white text-black group-hover:border-primary group-focus:border-primary transition-all ">
            rate
          </button>
          <span className="text-3xl font-bold ">{name}</span>
      </div>

The docs mention to add group to the parent and group-hover to the child, but it does nothing for me and the group property on the parent doesn't isn't highlighted by intellisense. Any idea what could be happening?

CodePudding user response：

try removing whitespace at the beginning and end of your className

CodePudding user response：

This may just be a problem with your primary color. The group hover does work when using a stock Tailwind color (e.g. blue-700):

<div className="rounded-15px group flex w-full items-center justify-between border border-solid border-white px-10">
  <button className="rounded-22px my-6 flex items-center border border-solid border-white bg-white py-4 px-6 text-2xl text-black transition-all group-hover:border-blue-700 group-focus:border-blue-700">rate</button>
  <span className="text-3xl font-bold">{name}</span>
</div>

You can see it working in the playground here: https://play.tailwindcss.com/yHvU4kgGpd

One possibility is that you've overwritten the default colors in your tailwind.config.js file. Please ensure that you are including your custom colors in the extend section. For example:

module.exports = {
  ...
  theme: {
    extend: {
      colors: {
        'primary': '#243c5a'
      }
    }
  }
}