ADD: pkg files

.editorconfig

@@ -0,0 +1,26 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+indent_size = 4
+trim_trailing_whitespace = false
+max_line_length = 80
+
+[*.{css,js,cjs,mjs}]
+indent_size = 4
+max_line_length = 80
+
+[*.html]
+indent_style = tab
+indent_size = 4
+max_line_length = 80

.gitignore

@@ -4,4 +4,5 @@
 
 # Development
 node_modules
-.vscode/*
+.vscode/*
+tests/output.css

.nvmrc

@@ -0,0 +1 @@
+16

CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.0] - 2023-07-05
+Initial release 🎉

README.md

@@ -1,7 +1,7 @@
 # Fylgja - TailwindCSS CSSProps Plugin
 
-[![NPM version](https://img.shields.io/npm/v/@fylgja/tailwindcss-plugin-css-props)](https://www.npmjs.org/package/@fylgja/tailwindcss-plugin-css-props)
-![license](https://img.shields.io/github/license/fylgja/tailwindcss-plugin-css-props)
+[![NPM version](https://img.shields.io/npm/v/@fylgja/tailwindcss-plugin-cssprops?style=flat-square)](https://www.npmjs.org/package/@fylgja/tailwindcss-plugin-cssprops)
+![license](https://img.shields.io/github/license/fylgja/tailwindcss-plugin-cssprops?color=%23234&style=flat-square)
 
 Introducing a powerful plugin that enhances your development experience by allowing you to manage your CSS variables directly in your `tailwindcss.config.js` file, eliminating the need to define them in your CSS.
 
@@ -10,23 +10,63 @@ With this plugin, you can effortlessly manage your CSS variables using design to
 ## Installation
 
 ```bash
-npm install @fylgja/tailwindcss-plugin-css-props
+npm install @fylgja/tailwindcss-plugin-cssprops
 ```
 
-Then add the plugin to your tailwind.config.js file:
+## How to use
+
+Add the plugin to your tailwind.config.js file:
 
 ```js
 module.exports = {
   theme: {
-    // ...
+    extend: {
+        // ...
+    }
   },
   plugins: [
-    require('@fylgja/tailwindcss-plugin-css-props'),
-    // ...
+    require('@fylgja/tailwindcss-plugin-cssprops')({
+        tokens: {
+            colors: {
+                primary: "200 50% 50%" // HSL color syntax
+            },
+        },
+    }),
   ],
 }
 ```
 
-## How to use
+Also make sure to add your the tokens to the plugin options.
+
+Now you can use the tokens like ny CSS vairbale in your frontend.
+
+To take it a step futere you can also add this to your TailwindCSS colors;
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+        colors: {
+            primary: {
+                DEFAULT: "hsl(var(--color-primary) / <alpha-value>)",
+            }
+        }
+    }
+  },
+  plugins: [
+    require('@fylgja/tailwindcss-plugin-cssprops')({
+        tokens: {
+            colors: {
+                primary: {
+                    DEFAULT: "200 50% 50%" // HSL color syntax
+                }
+            },
+        },
+    }),
+  ],
+}
+```
+
+so you can use it as `bg-primary`.
 
-<!-- TODO -->
+For more information on how to use CSS variables in TailwindCSS see the [TailwindCSS docs on using-css-variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables)