I am new to Tailwind CSS. I got this error while building a React project:
The hover: class does not exist. If hover: is a custom class, make sure it is defined within a #layer directive.
I found a similar problem on StackOverflow but it isn't helping me. Can anyone tell me why this is happening?
//Index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.btn-purple {
#apply px-4 py-1 text-sm text-purple-600 font-semibold border border-purple-200 rounded-full hover: text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2;
}
}
It is not identifying the hover property because of space after hover: in text-white.
Remove the space after the hover
hover:text-white
I suggest to simply save without formatting in order to avoid this behavior. You can also disable some auto-formatting settings in VSC.
I've also answered this in your GitHub discussion:
Save using CTRL + K, and then CTRL + SHIFT + S. This is the VSC shortcut to Save without formatting (see screenshot)
You'll have to make a new selector and then put all the hover elements in there.
.btn-purple {
#apply classA classB;
}
.btn-purple:hover {
#apply hoverClassC hoverClassD;
}
Make sure you don't put hover: in front of the hover classes though
Related
I am trying to add a different margin for large screens, and my breakpoints are not working. They work elsewhere except in this specific component.
My React.js component:
<Link to={`/dashboard/files/${name}`} className="hover:text-black">
<div className="bg-white h-24 w-28 rounded-2xl m-2 sm:m-4 inline-block p-1.5 cursor-pointer hover:shadow-md">
<div className="h-16 w-20 m-auto"> {icon} </div>
<Para content={name} />
</div>
</Link>
The m-4 class is being overridden by a value in _spacing.scss. I don't know what that file is or where it comes from. It's overriding the m-2 class with !important.
Have you tried overriding the value from the external SCSS file by adding your own "important" modifier? The exclamation point should be placed after the breakpoint variant value. For example:
<div className="sm:!m-4 ..." />
See: https://tailwindcss.com/docs/configuration#important-modifier
If you run into a lot of problems with SCSS overrides and want to ensure that your Tailwind utility classes always apply, you could instead add the important option to your tailwind.config.js:
module.exports = {
important: true,
}
I have a react project, and I'm creating a className for a div using classname package and tailwind classes. This div is actually the root element of a component that has some classes and accepts some from outside. The final class looks like below:
class="flex-1 bg-white border p-8 mb-6 rounded-md tracking-wide mt-1 !mb-0 md:mb-6 !bg-transparent md:bg-white border-0 md:border-1 !p-0 md:!p-6 tracking-wide relative"
It works fine when I test it on my local branch and the bottom margin is zero. But when I push it to my main branch and it builds what I see on the browser is different. The '!mb-0' got overridden and the mb-6 still shows. This problem is repeated everywhere.
Is there a way to avoid this so what we see on the local host acts exactly like the one on the main branch and demo after deploy?
This is how the margin classes look like after deploy
I was wondering if there is a way to chain multiple tailwind css classes on a single hover instance on an html element instead of using multiple hover instances.
For instance instead of this
<button class="hover:bg-blue-900 hover:text-white"></button>
whether you can have this or something else
<button class="hover:bg-blue-900:text-white"></button>
No there isn't. As from the docs(https://tailwindcss.com/docs/hover-focus-and-other-states), you can see they themselves add multiple classes for focus/hover.
However you can create reusable styles to counter this
Sadly it seems not. Maybe something that should be suggested to the team
I was trying to do something similar, i wanted the text to change color when hover the div.
searching in the docs i found the 'group' that helped me:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
i tried different types of hover like:
hover:bg-green-600 text-gray-50
hover:[bg-green-600 text-gray-50]
hover:(bg-green-600 | text-gray-50)
Maybe you can try wrapping the button in a div and add the group class
my code before, did not work like this
<Link to='/home'>
<div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:(bg-green-600 text-gray-50)">
<span className="text-[15px] ml-4 text-gray-500 font-bold">Home</span>
</div>
</Link>
after using gruop
<Link to='/home' className='group'>
<div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer group-hover:bg-green-600" >
<span className="text-[15px] ml-4 text-gray-500 group-hover:text-gray-50 font-bold">Home</span>
</div>
</Link>
with group when i hover the div it also change the span text color, like this the cursor don't need to be right on top of the word to make hover work.
but I still wish there was a way to put more than one class on the same hover, I hope they add it in the future...
hope it may help
I stumbled upon the same issue and was going to write a Tailwind plugin for that but it turns out that it's hard to mess with the rules they have set, you can only extend it by adding new variants and utilities but cannot do something like hover:(text-white bg-red-500).
However, I did find out about twin.marco that has this variant groups feature so check do check that out.
Is it possible to use transforms with the group-hover pseudo selector? I can get group-hover to work for things that aren't transforms like text color, but I can't get it to work while doing things like translate-x or scale. Below is an example. Neither of the group-hover transforms on the inner div work for me but the group hover for background and text work.
<div class="group">
<div id="inner" class="transform group-hover:translate-x-1/2 group-hover:scale-110 group-hover:bg-blue-200">
<p class="group-hover:text-white">some text</p>
</div>
</div>
Am I doing something wrong? here's a codepen of it in action
See, as per the documentation group-hover is enabled for a few core plugins which does not include transform.
So to support transform too, you will have to enable group-hover variant for it in the tailwind.config.js, as explained in the documentation.
The documentation is not that detailed.
To make group-hover work with transform -> translate you have to enable it in fact for the translate attribute - not transform.
At least this is what worked for me in tailwind v2.2.16.
You can do it like this (so it will work both for group-hover and hover):
config: {
variants: {
extend: {
translate: ['group-hover', 'hover'],
},
},
}
in your tailwind.config.js file.
I'm using TailwindCSS for a project, and I'm stuck on a weird interraction.
The result I'm looking for is to have a ring outside a button when I hover it, but using the ring classes from Tailwind, I can't get the ring on hover, yet it work using focus.
Before filling a bug report, I thought maybe one you guys might see a mistake on my part before ?
I made the smallest possible codepen to reproduce my issue : https://codepen.io/Pymous/pen/bGBQKPO
The CodePen contains this simple code :
<button class="mt-4 ml-4 px-8 py-2 text-white bg-yellow-500 ring-offset-2 ring-transparent ring-2 focus:ring-red-500 hover:ring-red-500">
Connexion
</button>
Thanks !
Hover is not enabled by default according to tailwindcss's documenation.
By default, only responsive, focus-within and focus variants
are generated for ring width utilities.
You can control which variants are generated for the ring width
utilities by modifying the ringWidth property in the variants section
of your tailwind.config.js file.
For example, this config will also generate hover and active variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
ringWidth: ['hover', 'active'],
}
}
}
https://tailwindcss.com