DOM Studio

Documentation

Theme Vue Components with Tailwind CSS

CSS variables

Install a default theme in one import, or own the semantic tokens that style every DOM Studio component.

Quick start

Install the default theme

For the fastest working render, import the complete stylesheet once in your Vue application entry file. It includes Tailwind, component integration, and DOM Studio's default light and dark themes.

js
import '@getdom/studio/style.css';

Production setup

Move the theme into your app

Import the Tailwind integration from your application stylesheet, then define the semantic theme variables underneath it. Your app owns those values while DOM Studio components consume them.

css
/* src/app.css */
@import "tailwindcss";
@import "@getdom/studio/tailwind.css";

/* Add your light and dark semantic theme variables below these imports. */

How it works

Semantic tokens, not component overrides

Prefer shared variables such as --primary, --canvas, --radius, and the surface tokens when you want a consistent theme across the library. This keeps components aligned and makes light and dark modes easier to maintain.

For a deliberate one-off, copy the component into your project and edit its Tailwind utilities directly. Component source remains yours to change when its structure or styling should differ from the wider system.

Colour roles

Tokens such as --canvas, --primary, --muted, and their foreground pairs keep contrast and meaning consistent.

Light and dark modes

Define light values on :root and dark values on [data-theme="dark"]. Components switch without per-component changes.

Shared surfaces

Radius, shadows, borders, inputs, controls, and overlays use the same theme contract throughout the library.

vue
<script setup>
import { DomButton, DomCard } from '@getdom/studio/vue';
</script>

<template>
	<DomCard class="space-y-4 p-6">
		<p class="text-muted-fg">Components consume your semantic theme tokens.</p>
		<DomButton>Continue</DomButton>
	</DomCard>
</template>

Theme editor

Generate a theme against live components

Use the full-width editor to choose light and dark colours, adjust component surfaces, preview the result, and export the finished CSS. The editor keeps documentation navigation available from its collapsed sidebar button.

Open theme editor