The On-Hover Trigger for the Outline Button is not working

[DanielCoder834]

I think I know what the issue is from commenting out these two lines in the app.css file:

@layer base {
	* {
		/* @apply border-border; */
	}
	body {
		/* @apply bg-background text-foreground; */
	}
}

The issue is that when I uncomment these lines, I get: [plugin:@tailwindcss/vite:generate:serve] Cannot apply unknown utility class: border-border. The page loaded when I commented the lines, but the button did not work. Is there a way to fix the button or the two commented lines?

For reference here is my code:

<script lang="ts">
	import clothing_placeholder from '$lib/images/product-image';
	import { Button } from '$lib/components/ui/button/index.js';

	export let discount;
	export let nameOfProduct;
	export let productDescription;
	export let currentPrice;
	export let prevPrice;
	export let productLink;
	export let websiteName;
</script>

<div class="shopping-icon">
	<div class="discountContainer">
		<div class="discountMarker">-{discount}%</div>
	</div>

	<img src={clothing_placeholder} class="shopping-img" alt="Clothing Placeholder img" />
	<div class="productInfoContainer">
		<h1 class="productName">{nameOfProduct}</h1>
		<h3 class="productDescription">{productDescription}</h3>
		<div style="priceContainer">
			<span class="productPrice">{currentPrice}$</span>
			<span class="previousProductPrice">
				<s>{prevPrice}$</s>
			</span>
			<Button class="productLinkBtn" variant="outline"
				><a class="productLink" href={productLink}>{websiteName}</a>
			</Button>
		</div>
	</div>
</div>

<style>
	@font-face {
		font-family: 'Poppins';
		src: url('fonts/Poppins/Poppins-Medium.ttf');
	}
	.discountContainer {
		position: relative;
		display: inline-block;
	}
	.discountMarker {
		position: absolute;
		top: 2rem;
		left: 12rem;
		padding: 0.5rem;
		background-color: #e97171;
		color: #ffffff;
		height: 3.5rem;
		justify-content: center;
		width: 3.5rem;
		display: flex;
		align-items: center;
		border-radius: 50%;
		/* right: 2rem; */
	}
	.shopping-icon {
		display: flex;
		flex-direction: column;
		background-color: white;
		color: black;
		width: 16.5rem;
	}
	.shopping-img {
		max-width: 100%;
		max-height: 100%;
		display: block;
		margin: 0 auto;
		width: 100%;
	}
	.productInfoContainer {
		height: auto;
		width: auto;
		background-color: #f4f5f7;
		padding: 1rem;
	}
	.productName {
		font-family: Poppins;
	}
	.productDescription {
		color: #898989;
	}
	.priceContainer {
		display: flex;
	}
	.productPrice {
		margin-right: 0.25rem;
	}
	.previousProductPrice {
		margin-left: 0.25rem;
		margin-right: 0.5rem;
	}
	.productLinkBtn {
		margin-left: 4rem;
		/* background: none; */
		/* border: none; */
		width: 100%;
	}
	.productLink {
		text-decoration: none;
		color: black;
	}
</style>

edit:
I found these two lines giving errors from bits-ui not having a .Props or .Events field. I tried replacing them with RootProps, and Root, but that did not fix anything

type Props = ButtonPrimitive.Props & {
	variant?: Variant;
	size?: Size;
};

type Events = ButtonPrimitive.Events;

Also, adding hover:bg-black to the class name also works. I think it might be just hard to see with the background color I chose.

<Button class="productLinkBtn hover:bg-black" variant="outline" href={productLink}>
		{websiteName}
</Button>