@indielayer/ui

Tools for creators.

Indielayer UI

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

• 📖 Documentation

Quickstart

npm init @indielayer/ui

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 = {
  darkMode: 'class',
  // load indielayer ui presets
  presets: [indielayer()],
  // allow PurgeCSS to analyze components
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    'node_modules/@indielayer/ui/**/*',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Load the plugin

Load the plugin in your Vue 3 application

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

const app = createApp(App)

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

// or
import {
  XButton,
  XInput,
  // ...
} from '@indielayer/ui'

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

Load the module in your Nuxt 3 application

import { defineNuxtConfig } from 'nuxt'

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

📖  Read more