Installation

Although pxd projects are written in tailwindcss@4, we still provide a native way to help those projects that do not use tailwindcss access.

The adaptation of unocss/tailwindcss@3 will be completed later.

Install

npm install pxd

Styles

Native CSS

Just import this stylesheet globally.

// main.js
import 'pxd/styles.css'

Tailwindcss@4

/* src/styles/index.css */
@import "tailwindcss";

/* add pxd styles */
@import "../../node_modules/pxd/dist/styles/tw.css";
@source "../../node_modules/pxd";

Usage

You can register globally or import on demand, or import automatically.

Global Import

You can register all the components to the global at one time, but this may lead to a larger volume after your construction.

import PXD from 'pxd'
import { createApp } from 'vue'

const app = createApp()

app.use(PXD)

<template>
  <PButton>Click me</PButton>
</template>

Import on demand

Only use the components you need to avoid being too big after packaging.

<script setup>
import { Button } from 'pxd'
// OR
// import Button from 'pxd/components/button'
</script>

<template>
  <Button>
    Click me
  </Button>
</template>

Import automatically

Use unplugin-vue-components to simplify the import process.

// vite.config.js

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import PxdResolver from 'pxd/resolver'

export default defineConfig({
  plugins: [
    Vue(),
    Components({
      resolvers: [
        PxdResolver(),
      ],
    }),
  ],
})

Then you can focus on the business logic itself.

<template>
  <PButton>
    Click me
  </PButton>
</template>