feat: document development

README.md

@@ -8,8 +8,6 @@
 <div align="center">
 
 [![Discord](https://img.shields.io/discord/1011702194925490186?color=blue&label=discord&logo=discord)](https://discord.gg/yde6mcgs2C)
-![CI](https://github.com/whizzes/exo/workflows/ci/badge.svg)
-![Pages](https://github.com/whizzes/exo/workflows/pages/badge.svg)
 ![Publish](https://github.com/whizzes/exo/workflows/publish/badge.svg)
 [![Version](https://img.shields.io/npm/v/@whizzes/exo.svg?style=flat)](https://www.npmjs.com/package/@whizzes/exo)
 [![Downloads](https://img.shields.io/npm/dm/@whizzes/exo.svg?style=flat)](https://www.npmjs.com/package/@whizzes/exo)
@@ -62,6 +60,14 @@ module.exports = {
 bun run story:dev
 ```
 
+### Setting up for Local Use
+
+Include Exo as a local dependecy by clonning and building the project locally.
+
+```json
+    "@whizzes/exo": "file:../exo",
+```
+
 ## Cloudflare Pages Preview Environments
 
 Every time you open a new pull request, Cloudflare Pages will create a unique

package.json

@@ -2,9 +2,10 @@
   "name": "@whizzes/exo",
   "version": "0.0.4",
   "scripts": {
-    "build": "vite build && npm run package",
+    "build": "vite build && npm run package && npm run css:build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "css:build": "tailwindcss build -i ./src/app.css -o ./dist/styles.css",
     "dev": "vite dev",
     "format": "rome format --write ./src && rome check --apply ./src",
     "format:unsafe": "rome format --write ./src && rome check --apply-unsafe ./src",
@@ -22,6 +23,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
+    },
+    "./dist/styles.css": {
+      "import": "./dist/styles.css",
+      "require": "./dist/styles.css"
     }
   },
   "files": [

tailwind.config.cjs

@@ -14,15 +14,13 @@ module.exports = {
           border: "#CCE7FF",
           background: "#E5F3FF",
         },
-
         'exo-red':{
           base: "#E92C2C",
           hover: "#ED5656",
           pressed: "#BA2323",
           border: "#FBD5D5",
           background: "#FFECEC",
         },
-
         'exo-grayscale': {
           "content-1": "1C1C1C",
           "content-2": "#585757",
@@ -36,9 +34,6 @@ module.exports = {
         sans: ['Inter', ...defaultTheme.fontFamily.sans]
       }
     },
-    variants: {
-      extend: {}
-    },
     plugins: [require('@tailwindcss/forms')]
   }
 };