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 hover:bg-blue-600`;
-</script>
-
-<Button>Click me</Button>
-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>
-