Tailwind with Vue & Svelte

Use Tailwind in Vue single-file components and Svelte components with their native class binding syntax.

4 min read Level 2/5 #tailwind#vue#svelte

What you'll learn

Set up the Vite plugin for Vue or Svelte
Use the class and class binding directives
Decide between scoped styles and utilities

The Tailwind engine is identical across frameworks — only the class binding syntax changes. Vue and Svelte both give you ergonomic ways to toggle utilities.

Setup

The same @tailwindcss/vite plugin works for both. Register it in vite.config.js alongside the Vue or Svelte plugin, then add @import "tailwindcss"; to your CSS entry.

npm install tailwindcss @tailwindcss/vite

Vue Class Bindings

Vue’s :class accepts arrays and objects, which pairs perfectly with conditional utilities:

<template>
  <button
    class="rounded-md px-4 py-2 transition"
    :class="[isOpen && 'rotate-180', isOpen ? 'bg-blue-600' : 'bg-gray-200']"
  >
    Toggle
  </button>
</template>

Svelte Class Directives

Svelte offers the class: directive for a single toggled class, or a normal template literal for richer logic:

<button
  class={`rounded-md px-4 py-2 ${big ? 'text-lg' : 'text-sm'}`}
  class:underline={active}
>
  Label
</button>

Scoped Styles vs Utilities

Tailwind replaces almost every reason to write <style scoped>. Reach for scoped CSS only for genuinely local exceptions — a one-off keyframe or a deeply dynamic computed value. Everything reusable belongs in utilities so it stays consistent across components.

clsx, cva & tailwind-merge →