vxVue

Introduction

VxVue provides a handful of reusable Vue components styled with Tailwind CSS. All components are geared towards simplicity leaving room for customizations, extensions or adaptations. At some point a more verbose documentation than this brief readme might emerge.

Requirements

• Vue.js 3.5+
• Tailwind CSS 4+

Setup

The official Tailwind CSS forms plugin is used to provide basic styling of the form components using the class strategy which allows the styling of non-form elements consistently. An easy to configure color theming is applied. vxvue and vxvue-alt are used as the two colors scales. Since Tailwind won't observe classes in imported components tailwind.config.js should also list the node package in the content array.

1@source '<path-to-node_modules>/vx-vue/**/*.js'

Import the few scoped styles along with your CSS add to your main.js or index.js file.

1import 'vx-vue/vx-vue.css'

The components use an extra color palette. Used library specific colors are

*-vxvue
*-vxvue-50
*-vxvue-100
*-vxvue-600
*-vxvue-700

*-vxvue-alt
*-vxvue-alt-50
*-vxvue-alt-100
*-vxvue-alt-300
*-vxvue-alt-800
*-vxvue-alt-900

*-error
*-error-50
*-error-600

*-success
*-success-700

Style them in your projects main CSS file with

1@theme {
2    --color-vxvue-50: ...;
3    --color-vxvue-100: ...;
4    ...
5    --color-vxvue: ...;
6
7    --color-vxvue-alt-50: ...;
8    --color-vxvue-alt-100: ...;
9    ...
10    --color-vxvue-alt: -...;

Stacking of absolutely or fixed positioned elements use the following CSS variables to determine their position in the z-index stack:

--zIndex-confirm: 1000;
--zIndex-toast: 900;
--zIndex-dropdown: 800;
--zIndex-label: 100;
--zIndex-modal: 600;