src/App.vue
Ready
localhost:5173
Vue + Tailwind 3ReadyVUELn 1, Col 1
Online Vue and Tailwind CSS playground with editable single-file components, Tailwind CSS v4 utilities, and instant live preview.
Online Vue and Tailwind CSS playground with editable single-file components, Tailwind CSS v4 utilities, and instant live preview.
Runtime: Vue v3.5.18 · Tailwind v4.3.3
Press Enter to evaluate, ↑ and ↓ to browse command history, and Ctrl/⌘ + L to clear the console.
import { createApp } from 'vue'
import App from './App.vue'
import './styles.css'
createApp(App).mount('#app')
<script setup>
import { ref } from 'vue'
import MetricCard from './components/MetricCard.vue'
const published = ref(false)
</script>
<template>
<main class="min-h-screen bg-emerald-950 px-6 py-16 text-emerald-50">
<section class="mx-auto max-w-4xl">
<span class="rounded-full border border-emerald-300/25 bg-emerald-300/10 px-3 py-1 font-mono text-xs font-bold uppercase tracking-[0.18em] text-emerald-200">
Vue 3 + Tailwind CSS 4
</span>
<div class="mt-8 grid gap-8 lg:grid-cols-[1.25fr_0.75fr] lg:items-end">
<div>
<h1 class="text-5xl font-black tracking-[-0.055em] text-white sm:text-7xl">
Utility-first Vue components.
</h1>
<p class="mt-5 max-w-2xl text-lg leading-8 text-emerald-100/65">
Edit Vue single-file components with Tailwind utilities and see the
browser preview update instantly.
</p>
</div>
<button
type="button"
class="rounded-2xl bg-emerald-300 px-5 py-3 font-bold text-emerald-950 shadow-lg shadow-emerald-500/20 transition hover:-translate-y-0.5 hover:bg-emerald-200"
@click="published = !published"
>
{{ published ? 'Published successfully' : 'Publish preview' }}
</button>
</div>
<div class="mt-12 grid gap-4 sm:grid-cols-3">
<MetricCard label="Components" value="2" detail="Editable SFC files" />
<MetricCard label="Runtime" value="3.5" detail="Vue Composition API" />
<MetricCard label="Styling" value="v4" detail="Tailwind CSS" />
</div>
</section>
</main>
</template>