Component Structure

Each component in this system is split into two files:

• A JavaScript file for logic, structure, and dynamic behavior
• A CSS file for styling and visual design

This approach keeps logic and presentation cleanly separated and easy to maintain.

Example: Button Component

File Structure

components/
└── button/
    ├── index.js   ← defines behavior and structure
    └── button.css ← defines visual style

---

button.css

A basic style definition for a "primary" button:

.p-btn-root_primary {
    @apply flex items-center justify-center text-white font-semibold text-sm rounded py-2 px-3 gap-2 bg-blue-600 hover:bg-blue-700 active:bg-blue-700 focus:bg-blue-700 focus:outline-2 focus:outline-offset-2 focus:outline-blue-400;
}

---

index.js

A simplified structure configuration for a button component:

export default {
    root: ({ instance, context }) => {
      const variant = instance?.variant || 'primary'
      const size = instance?.size || 'auto'
  
      return {
        class: [
          {
            'p-btn-root_disabled': context.disabled,
            'p-btn-root_primary': variant === 'primary',
            'p-btn-root_secondary': variant === 'secondary',
            'p-btn-root_link': variant === 'link',
            'p-btn-root_business': variant === 'business',
            'p-btn-root_signature': variant === 'signature',
            'p-btn-root_size_full': size === 'full'
          }
        ],
        style: {
          '--svg-fill': instance?.$attrs?.['icon-color'] || 'white'
        }
      }
    },
  
    label: () => ({}),
  }

Conventions

• All class names follow a .p-[component]-[element] naming pattern
• Only the index.js file is imported directly by PrimeVue
• CSS files are included manually or compiled via Tailwind’s @layer system
• Variants are handled dynamically via the instance.variant property

Using Tailwind

To use Tailwind, you need to add the location of your presets folder to the content array in your tailwind.config.js file.

module.exports = {
  content: [
    "./.vitepress/theme/**/*.{vue,js,ts,jsx,tsx}",
	"./.vitepress/presets/**/*.{vue,js,ts,jsx,tsx,css}",
    "./**/*.md",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Depending on your setup, you may also need to import Tailwind directly into the CSS file of your component.

@import "tailwindcss/theme" theme(reference);

.p-btn-root_primary {
    @apply flex items-center justify-center text-white font-semibold text-sm rounded py-2 px-3 gap-2 bg-blue-600 hover:bg-blue-700 active:bg-blue-700 focus:bg-blue-700 focus:outline-2 focus:outline-offset-2 focus:outline-blue-400;
}