windi.config.ts

import { defineConfig } from 'windicss/helpers'
import lineClamp from 'windicss/plugin/line-clamp'

export default defineConfig({
  darkMode: 'class',
  attributify: true,
  extract: {
    include: [
      '**/*.{vue,html}',
    ],
  },
  plugins: [lineClamp],
  shortcuts: {
    'text-neon':
      'text-transparent bg-clip-text bg-gradient-to-r from-sky-500 to-sky-900 dark:to-sky-200 ',
    'glass':
      'backdrop-filter backdrop-blur-lg backdrop-saturate-[180%] filter drop-shadow-xl',
    'btn': `
      font-semibold h-12 px-6 rounded-lg inline-flex items-center justify-center
      sm:w-auto
    `,
    'btn-primary': `
      bg-sky-500 text-white
      border border-slate-200 border-opacity-30
      dark:bg-sky-500 dark:text-slate-200
      hover:bg-sky-400 hover:border-opacity-10 dark:hover:bg-opacity-10
      focus:outline-none focus:ring-2 focus:ring-slate-400 focus:right-offset-2 focus:right-offset-slate-50
    `,
    'btn-secondary': `
      bg-slate-200 text-slate-800
      border border-slate-200 border-opacity-30
      dark:bg-white dark:text-slate-200
      hover:bg-sky-400 hover:text-white hover:border-opacity-10 dark:hover:bg-opacity-10
      focus:outline-none focus:ring-2 focus:ring-slate-400 focus:right-offset-2 focus:right-offset-slate-50
    `,
    'btn-blur':
      'backdrop-filter backdrop-blur-sm backdrop-saturate-[180%] dark:bg-opacity-33',
    'btn-icon': `inline-block cursor-pointer select-none p-2
      text-white hover:bg-slate-600 hover:bg-opacity-50
      rounded-md !outline-none transition-all duration-200 ease-in-out
    `,
    'card-blur': 'backdrop-filter backdrop-blur-lg backdrop-saturate-[180%]',
  },
})