Skip to main content

Style with Tailwind

Keep Nuxt Photo structure CSS and own the visual theme with Tailwind CSS.

Keep Nuxt Photo's structure CSS. It provides album geometry, modal positioning, gesture surfaces, and transition state. Tailwind can own the visual theme.

Configure structure CSS

nuxt.config.ts
import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-photo'],
  css: ['~/assets/css/main.css'],
  nuxtPhoto: {
    css: 'structure',
  },
  vite: {
    plugins: [tailwindcss()],
  },
})
app/assets/css/main.css
@import 'tailwindcss';

Do not use css: 'none' unless the application replaces every structural rule.

Style the album

Use the component class props for the thumbnail wrappers and images:

app/pages/gallery.vue
<script setup lang="ts">
import type { PhotoItem } from '@lupinum/nuxt-photo/app'

defineProps<{ photos: readonly PhotoItem[] }>()
</script>

<template>
  <PhotoAlbum
    :photos="photos"
    item-class="group overflow-hidden rounded-xl bg-stone-900"
    img-class="transition duration-300 group-hover:scale-[1.02]"
  />
</template>

Style the lightbox

With css: 'structure', provide a visual lightbox once for the application:

app/plugins/photo-lightbox.ts
import { LightboxComponentKey } from '@lupinum/nuxt-photo/app'
import AppLightbox from '~/components/AppLightbox.vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.provide(LightboxComponentKey, AppLightbox)
})
app/components/AppLightbox.vue
<script setup lang="ts">
import { Lightbox } from '@lupinum/nuxt-photo/app'
</script>

<template>
  <Lightbox>
    <template #counter="{ activeIndex, count }">
      <span class="rounded-full bg-black/60 px-3 py-1 text-sm text-white">
        {{ activeIndex + 1 }} / {{ count }}
      </span>
    </template>

    <template #caption="{ photo }">
      <div class="mx-auto max-w-2xl text-center text-white">
        <h2 v-if="photo?.caption" class="font-medium">{{ photo.caption }}</h2>
        <p v-if="photo?.description" class="mt-1 text-sm text-white/70">
          {{ photo.description }}
        </p>
      </div>
    </template>
  </Lightbox>
</template>

The built-in component still owns focus, gestures, navigation, and its native buttons. The slots change only the visible regions they replace.

If the design needs different lightbox markup, continue with Build a lightbox from primitives.