Psyui is designed for Vue and requires Vue v3+.

Vite

Nuxt

Install Tailwind CSS and its peer dependencies

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

For a complete guide, follow the official documentation

Tailwind configuration

Add psyui required colors:

export default {
  ...,
  theme: {
    ...,
    extend: {
      ...,
      colors: {
        brand: {
          white: '',
          black: '',

          light: '',
          dark: '',

          primary: '',
          primaryLight: '',
          primaryDark: '',

          secondary: '',
          secondaryLight: '',
          secondaryDark: '',

          success: '',
          successLight: '',
          seccessDark: '',
          warning: '',
          warningLight: '',
          warningDark: '',
          danger: '',
          dangerLight: '',
          dangerDark: '',
          info: '',
          infoLight: '',
          infoDark: '',

          gray: {
            50: '',
            100: '',
            200: '',
            300: '',
            400: '',
            500: '',
            600: '',
            700: '',
            800: '',
            900: '',
            1000: '',
            1100: '',
            1200: ''
          }
        }
      }
    }
  }
}

We use the keyword brand, example: bg-brand-primary.

Update path alias

Update your tsconfig.json with baseUrl and paths compiler options:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Copy and paste components

Now it's time to copy and paste the components into your project directory: under /src/components.

After adding them, you will import and use them like this:

<template>
  <Card>Psyui</Card>
</template>

<script setup lang="ts">
  import Card from '@/components/Card.vue'
</script>

Go search for components.