tailwind-merge-svelte

This library provides all basic html elements as headless components with builtin tailwind-merge.

Usage

Layered approach

In this example we are creating a button component. It has some base styles baseTw that can be overridden by overrideTw. The styles of overrideTw are passed in as a prop. Lastly there are some fixed styles fixedTw that can not be overridden.

<script lang="ts">
	import { Button } from 'tailwind-merge-svelte';
	import type { Snippet } from 'svelte';

	type Props = {
		children: Snippet;
		class?: string;
	};

	let { children, class: className }: Props = $props();
</script>

<Button
	baseTw="p-4 rounded bg-gray-200"
	overrideTw={className}
	fixedTw="flex items-center justify-center"
>
	{@render children()}
</Button>

Class approach

If the layered approach does not fit your need you can also just use class.

<script lang="ts">
	import { Button } from 'tailwind-merge-svelte';
	import type { Snippet } from 'svelte';

	type Props = {
		children: Snippet;
		class?: string;
	};

	let { children, class: className }: Props = $props();
</script>

<Button class="rounded bg-gray-200 p-4 {className} flex items-center justify-center">
	{@render children()}
</Button>

clsx support

Same as the default svelte class attribute, the properties (class, baseTw, overrideTw & fixedTw) support the clsx syntax .

<Button baseTw={['p-4 rounded bg-gray-200', primary && 'bg-blue-200']} overrideTw={className}>
	{@render children()}
</Button>

Here is the documentation of the svelte clsx feature