vx-vue 1.2.0 → 1.3.0

package/README.md

@@ -5,40 +5,21 @@ VxVue provides a handful of reusable Vue components styled with Tailwind CSS. Al
 
 ## Requirements
 * Vue.js 3.5+
-* Tailwind CSS 3.4+
+* 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. 
-```javascript
-module.exports = {
-    content: [
-        './node_modules/vx-vue/**/*.js',
-        ...
-    ],
-    theme: {
-        extend: {
-            colors: {
-                'vxvue': {
-                    DEFAULT: ...,
-                    '50': ...,
-                    ...
-                    '900': ...
-                },
-                'vxvue-alt': {
-                    ...                
-                }
-            }
-        }
-    }
-}
+
+```css
+@source '<path-to-node_modules>/vx-vue/**/*.js'
 ```
-To use the few scoped styles along with your CSS add
 
-```javascript
+Import the few scoped styles along with your CSS add to your main.js or index.js file.
+
+```js
 import 'vx-vue/vx-vue.css'
 ```
-to your main.js or index.js file.
-
 The components use an extra color palette. Used library specific colors are
 
 ```
@@ -61,4 +42,20 @@ The components use an extra color palette. Used library specific colors are
 
 *-success
 *-success-700
-```
+```
+
+Style them in your projects main CSS file with
+
+```css
+@theme {
+    --color-vxvue-50: ...;
+    --color-vxvue-100: ...;
+    ...
+    --color-vxvue: ...;
+
+    --color-vxvue-alt-50: ...;
+    --color-vxvue-alt-100: ...;
+    ...
+    --color-vxvue-alt: -...;
+```
+

package/dist/style.css

@@ -0,0 +1 @@
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */button.success[data-v-9f360713]{background-color:var(--color-success,rgb(var(--success-color)));color:var(--color-white,#fff)}@media (hover:hover){button.success[data-v-9f360713]:hover{background-color:var(--color-success-700,rgb(var(--success-color-700)))}}button.success[data-v-9f360713]:focus{--tw-ring-color:var(--color-success,rgb(var(--success-color)))}button.error[data-v-9f360713]{background-color:var(--color-error,rgb(var(--error-color)));color:var(--color-error-50,rgb(var(--error-color-50)))}@media (hover:hover){button.error[data-v-9f360713]:hover{background-color:var(--color-error-600,rgb(var(--error-color-600)))}}button.error[data-v-9f360713]:focus{--tw-ring-color:var(--color-error-600,rgb(var(--error-color-600)))}button[data-v-9f360713]:disabled{background-color:var(--color-slate-300,oklch(.869 .022 252.894));color:var(--color-slate-800,oklch(.279 .041 260.031))}@media (hover:hover){button[data-v-9f360713]:disabled:hover{background-color:var(--color-slate-300,oklch(.869 .022 252.894))}}button[data-v-9f360713]:disabled:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentColor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}