Tailwind CSS Buttons

Work in progress A curated list of awesome, battle tested Tailwind CSS buttons components

Installation

Install Dependencies

npm i svelte-motion clsx tailwind-merge

Add util file

src/lib/utils/cn.ts 
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
        
export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

Copy the source code

src/lib/components/ui/TailwindCssButtons/TailwindCssButtons.svelte 
<script lang="ts">
	import { cn } from '@/utils';
	import { Clipboard } from 'lucide-svelte';

	export let className: string | undefined = undefined;
	export let onClick: (() => void) | undefined = undefined;
</script>

<div
	on:click={onClick}
	class={cn(
		'group/btn relative flex h-60 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-100 bg-white hover:border-neutral-200 dark:border-white/[0.2] dark:bg-black',
		className
	)}
>
	<div class="absolute inset-0 bg-dot-black/[0.1] dark:bg-dot-white/[0.1]" />
	<Clipboard
		class="absolute right-2 top-2 hidden h-4 w-4 text-neutral-300 transition duration-200 group-hover/btn:block"
	/>
	<div class="relative z-50"><slot /></div>
</div>
src/lib/components/ui/TailwindCssButtons/index.ts 
import TailwindCssButtons from './TailwindCssButtons.svelte';

export { TailwindCssButtons };

Props

TailwindCssButtons
Prop Type Description
className string | undefined CSS class name for the button.
onClick (() => void) | undefined Function to be called when the button is clicked.