svelte-twc

Overview

svelte-twc is a Svelte library that provides a way to use Tailwind CSS classes as components, inspired by TWC.

Motivation

Svelte is a great framework for building web applications, but it is difficult to use a lot of components with Tailwind CSS classes.

With svelte-twc, you can create components with Tailwind CSS classes easily.

Installation

This library supports only Svelte v5.

npm install svelte@next # Use Svelte v5
npm install svelte-twc

If you are using VSCode, you can use auto-completion. Please check TWC documentation.

Setup

Setup tailwind.css in your project yourself.

You need to add the plugin to your Vite config like this:

import { sveltekit } from '@sveltejs/kit/vite';
import { sveltetwc } from 'svelte-twc/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit(), sveltetwc()]
});

Usage

<script lang="ts">
	import { twc } from 'svelte-twc';
	const Button = twc.button`bg-blue-500 text-white px-4 py-2 rounded-md`;
	const HoverableButton = twc(Button)`hover:bg-blue-600`;
</script>

<HoverableButton>Hover me</HoverableButton>

Result:

<script lang="ts">
	import { twc } from 'svelte-twc';
	const colorClass = "bg-gray-200 text-gray-800";
	const centeredClass = "flex items-center justify-center";
	const Container = twc.div([colorClass, centeredClass].join(" "));
</script>

<Container class="font-bold">...</Container>

Result:

<div class="bg-gray-200 text-gray-800 flex items-center justify-center font-bold">...</div>