Vue Components

Styling with Tailwind CSS

• Use Tailwind CSS utility classes for all styling. Avoid writing custom CSS unless necessary. Utility classes keep the styles consistent and colocated with the template.
• Keep class lists readable.
  • Break long class lists into multiple lines for readability if needed.
  • Use component-level abstractions when appropriate.
• If multiple components share the same styles, extract them into reusable Vue components or leverage Tailwind's @apply in minimal CSS files or scoped styles.
• Handle responsive and dark mode thoughtfully. Use Tailwind's responsive and dark mode variants consistently. Ensure components look good on different screen sizes and in both light/dark themes.
• Accessibility matters. Tailwind won't handle accessibility for you. Make sure you add semantic HTML, ARIA attributes where needed, and focus handling for interactive components.

Example Structure

<script setup lang="ts">
import { computed } from 'vue'
import { useItems } from '@/composables/useItems'

const { initialItems } = defineProps<{
  initialItems?: Item[]
}>()

const { items } = useItems(props.initialItems || [])

/** We don't want to show the card when there's no item. */
const hasItems = computed(() => items.value.length > 0)
</script>

<template>
  <div v-if="items.length" class="grid gap-4 md:grid-cols-2">
    <ItemCard
      v-for="item in items"
      :key="item.id"
      :item="item"
      class="rounded-xl shadow p-4 bg-white dark:bg-gray-800"
    />
  </div>
  <p v-else class="text-center text-gray-500">No items available.</p>
</template>