Tailwind Capacitor Capacitor plugin

Tailwind Capacitor (shadcn registry)

Tailwind Capacitor ships Tailwind CSS v4 utilities for Capacitor safe areas and platform variants, plus Vue UI components, as a shadcn registry. You copy source into your app with shadcn add.

This page documents the v4 shadcn registry rebuild in Cap-go/tailwind-capacitor#129. Registry URLs under main resolve after that PR is merged. This docs PR is meant to land with or after #129.

Prerequisites

• Vue 3 app with Tailwind CSS v4 (@tailwindcss/vite or PostCSS)
• A project-level components.json from the shadcn CLI (npx shadcn@latest init)
• Path alias @/* pointing at your src/ folder
• No tailwind.config.js required

Install base styles

npx shadcn@latest add https://raw.githubusercontent.com/Cap-go/tailwind-capacitor/refs/heads/main/public/r/capacitor-tailwind.json
npx shadcn@latest add https://raw.githubusercontent.com/Cap-go/tailwind-capacitor/refs/heads/main/public/r/capacitor-provider.json
npx shadcn@latest add https://raw.githubusercontent.com/Cap-go/tailwind-capacitor/refs/heads/main/public/r/capacitor-shared.json
npx shadcn@latest add https://raw.githubusercontent.com/Cap-go/tailwind-capacitor/refs/heads/main/public/r/capacitor-icons.json

In your app global stylesheet, replace the @import "tailwindcss" line with the capacitor bundle import. Keep your other custom CSS. The bundle already includes Tailwind, so do not keep a separate Tailwind import:

@import '@/capacitor/styles/tailwind-capacitor.css';

Install components used in the example

App, Page, Navbar, and Button are separate registry items. Install each one:

npx shadcn@latest add https://raw.githubusercontent.com/Cap-go/tailwind-capacitor/refs/heads/main/public/r/capacitor-app.json
npx shadcn@latest add https://raw.githubusercontent.com/Cap-go/tailwind-capacitor/refs/heads/main/public/r/capacitor-page.json
npx shadcn@latest add https://raw.githubusercontent.com/Cap-go/tailwind-capacitor/refs/heads/main/public/r/capacitor-navbar.json
npx shadcn@latest add https://raw.githubusercontent.com/Cap-go/tailwind-capacitor/refs/heads/main/public/r/capacitor-button.json

Components land under src/capacitor/vue/components/. The provider lands under src/capacitor/vue/shared/. Shared classes land under src/capacitor/shared/. Icons land under src/capacitor/vue/components/icons/.

Vue usage

Import the files that shadcn add writes. The library example app generates @/capacitor/index.js as a convenience barrel. That file is not created when you install registry items into your own project.

Button has no fill prop. The default style is solid. Use the boolean outline or clear props for the other styles.

<script setup>
import TailwindCapacitorProvider from '@/capacitor/vue/shared/TailwindCapacitorProvider.vue'
import App from '@/capacitor/vue/components/App.vue'
import Page from '@/capacitor/vue/components/Page.vue'
import Navbar from '@/capacitor/vue/components/Navbar.vue'
import Button from '@/capacitor/vue/components/Button.vue'
</script>

<template>
  <TailwindCapacitorProvider>
    <App theme="ios" class="safe-areas">
      <Page>
        <Navbar title="Home" />
        <Button>Continue</Button>
      </Page>
    </App>
  </TailwindCapacitorProvider>
</template>

Safe areas

• Put safe-areas on the root page shell.
• Use pt-safe, pb-safe, pl-safe, and pr-safe for insets. There is no px-safe utility.
• Platform variants: ios:, android:, capacitor:, mobile:.

Registry hosting

Built JSON files live in public/r/ on GitHub. After npm run build:registry, serve them from raw GitHub or commit them to your site:

https://raw.githubusercontent.com/Cap-go/tailwind-capacitor/refs/heads/main/public/r/<name>.json

More

• Repository README
• Safe areas doc
• Platform variants doc