itshizhan/windivue

⚡️ Vue 3 / Nuxt 3 UI Library with Tailwind CSS 3. 🚀 Build and prototype fast web applications.

Tools for creators.

Indielayer UI

Tailwind CSS UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.

• 📖 Documentation

Getting Started

tailwindcss version >= 3.0 must be already present in your application

1. Add @indielayer/ui dependency to your project

# using npm
npm install @indielayer/ui --save-dev
# using yarn
yarn add @indielayer/ui --dev

2. Add Indielayer UI Tailwind CSS preset tailwind-preset.js to your Tailwind CSS configuration file tailwind.config.js with the purge css configurations

// tailwind.config.js
const indielayer = require('@indielayer/ui/tailwind.preset')

module.exports = {
  // load indielayer ui presets
  presets: [indielayer],
  // allow PurgeCSS to analyze components
  content: [
    'node_modules/@indielayer/ui/src/**/*.vue',
    './src/**/*.vue',
  ],
};

3. Load the plugin

Load the plugin in your vue 3 application

import { createApp } from 'vue'
import UI from '@indielayer/ui'

const app = createApp(App)

app.use(UI, { prefix: 'X' })

// or
import {
  Input,
  Button,
  // ...
} from '@indielayer/ui'

app.component('XButton', Button)
app.component('XInput', Input)

Load the module in your nuxt 3 application

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  buildModules: ['@indielayer/ui/nuxt'],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
})

📖  Read more