Styling

This boilerplate uses Tailwind CSS v4 for styling, providing a utility-first approach with excellent developer experience and built-in dark mode support.

Overview

The template uses standard Tailwind CSS v4 with pre-configured integrations:

• Tailwind CSS v4 - Utility-first CSS framework.
• shadcn-vue - Pre-installed UI component library.
• Nuxt UI - Additional Nuxt-specific utilities.
• Dark/light mode - @nuxtjs/color-mode integration.
• Typography plugin - For markdown content styling.

Theme customization

The template uses shadcn-vue's standard theming system with CSS variables in app/assets/css/tailwind.css.

Using design tokens

Access tokens through Tailwind utility classes:

<template>
  <div class="bg-background text-foreground">
    <button class="bg-primary text-primary-foreground">Button</button>
    <div class="border border-border">Card content</div>
  </div>
</template>

All shadcn-vue components automatically use these tokens.

Dark mode

Dark mode is implemented using @nuxtjs/color-mode and works automatically with the design token system.

Toggle dark mode

Use the useColorMode composable:

<script setup>
const colorMode = useColorMode()

const toggleTheme = () => {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
</script>

See app/components/header/ThemeSwitcher.vue for the complete implementation.

Changing theme colors

To customize colors, edit the CSS variables in app/assets/css/tailwind.css:

:root {
  --primary: oklch(0.7789 0.1393 46.57);  /* Change primary color */
  --background: oklch(1 0 0);              /* Change background */
  /* ... other variables */
}

shadcn-vue components automatically use these variables.

Template utilities

base-container

A responsive container with consistent padding used throughout the template:

<template>
  <div class="base-container">
    <!-- Content with max-width and responsive padding -->
  </div>
</template>

Defined as:

.base-container {
  @apply container mx-auto px-4 py-4 lg:px-8 lg:py-8 lg:max-w-7xl;
}

header-1

Consistent heading style used across pages:

<template>
  <h1 class="header-1">Page Title</h1>
</template>

Typography for content

The template includes @tailwindcss/typography for styling markdown content:

<template>
  <article class="prose dark:prose-invert max-w-none">
    <ContentRenderer :value="content" />
  </article>
</template>

The prose class automatically styles headings, paragraphs, lists, code blocks, and tables in your markdown content.

Animations

The template includes tw-animate-css for smooth animations:

<template>
  <!-- Fade in on mount -->
  <div class="animate-in fade-in duration-500">
  
  <!-- Slide in from bottom -->
  <div class="animate-in slide-in-from-bottom-4 duration-300">
  
  <!-- Loading spinner -->
  <div class="animate-spin">
</template>

Additional resources

For comprehensive Tailwind CSS documentation:

• Tailwind CSS documentation
• Tailwind CSS v4 updates
• @nuxtjs/color-mode documentation