'Tailwinds + Ant design : Button color is white but has own color wnen I hover it
I applied the tailwind CSS and Ant design with my Next.js project.
I found the primary button got a white color.
But it shows own primary button color when the mouse over.
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
/* ... */
}
@import '~antd/dist/antd.css';
Home.module.css
.container {
padding: 0 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
JSX code is like the following.
import * as React from "react";
import { Button, Table } from "antd";
import FishbowlLayout from "../../components/FishbowlLayout";
export function Index() {
return (
<div>
# FishbowlLayout uses Layout from Ant design.
<FishbowlLayout>.
<div className="grid grid-cols-6 gap-4">
# Button
<Button className="col-end-6 col-span-1 ..." type="primary">
New project
</Button>
# Table
<div className="col-span-5 ">
<Table dataSource={dataSource} columns={columns} />;
</div>
</div>
</FishbowlLayout>
</div>
);
}
export default Index;
Solution 1:[1]
A simple solution would be to override the CSS as shown below:
.ant-btn:not([disabled]):hover {
background:#faad14 !important;
}
Solution 2:[2]
You can simply add tailwind classes for this
<Button className="col-end-6 col-span-1 bg-blue-400 text-white hover:bg-blue-500" >
New project
</Button>
you can visit flowbite components also
Solution 3:[3]
In your tailwind.config file add the following:
corePlugins: {
preFlight: false
}
it's explained in a lot more detail in this video: https://www.youtube.com/watch?v=oG6XPy1t1KA&ab_channel=TailwindLabs
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Tyler2P |
Solution 2 | mohit maroliya |
Solution 3 | JordanW1988 |