@wra-gov/vue-components 0.19.3 → 0.19.4

package/README.md

@@ -47,8 +47,8 @@ Options API:
 
   export default {
     components: {
-      WraButton,
-    },
+      WraButton
+    }
   };
 </script>
 ```
@@ -77,6 +77,27 @@ export default defineNuxtPlugin((nuxtApp) => {
 });
 ```
 
+### Tailwind Usage
+
+By default registering the component library imports the CSS variables.
+
+However, to use the colours the component library provides in Tailwind helper
+classes like this,
+
+```html
+<div class="bg-wra-blue"></div>
+```
+
+The component library's Tailwind stylesheet must be imported. The instructions
+are created for Tailwind 4+. The CSS file must be the file imported by `index.html`
+
+`tailwind.css` / `index.css`/ `style.css`
+
+```css
+@import "tailwindcss";
+@import "@wra-gov/vue-components/tailwind.css";
+```
+
 ## Documentation
 
 [Storybook documentation](https://welsh-revenue-authority.github.io/component-library)

package/dist/tailwind.css

@@ -0,0 +1,22 @@
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@theme {
+  --color-wra-revenue: #2a225b;
+  --color-wra-black: #1f1f1f;
+  --color-wra-charcoal: #323232;
+  --color-wra-light-grey: #f1f1f1;
+  --color-wra-grey: #e5e5e5;
+  --color-wra-mid-grey: #b5b5b5;
+  --color-wra-dark-grey: #666666;
+  --color-wra-light-red: #ffe4e5;
+  --color-wra-red: #aa1111;
+  --color-wra-light-blue: #c2e0fc;
+  --color-wra-blue: #0360a6;
+  --color-wra-mid-blue: #3b7dc5;
+  --color-wra-dark-blue: #1f446d;
+  --color-wra-light-green: #cdf7d4;
+  --color-wra-green: #018a1e;
+  --color-wra-light-yellow: #fff5ce;
+  --color-wra-yellow: #ffd530;
+}