InSpatial Tailwind Config Init

apps/docs/app/globals.css

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

apps/docs/app/layout.tsx

@@ -1,3 +1,5 @@
+import "./globals.css";
+
 export default function RootLayout({
   children,
 }: Readonly<{

apps/docs/app/page.tsx

@@ -9,10 +9,10 @@ export default function Home() {
   }
   return (
     <main>
-      <Button className={kit("")} onPointerUp={() => {}}>
+      <Button className={kit("bg-green-500")}>
         Spatial Kit Button
       </Button>
-      <div>{testShuffle()}</div>
+      <p className={kit("text-eve")}>{testShuffle()}</p>
     </main>
   );
 }

apps/docs/package.json

@@ -18,12 +18,15 @@
   },
   "devDependencies": {
     "@inspatial/eslint-config": "workspace:*",
+    "@inspatial/tailwind-config": "workspace:^",
     "@inspatial/tsconfig": "workspace:*",
     "@types/node": "^20.16.10",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.14",
     "eslint": "^8.57.1",
     "eslint-config-next": "14.2.6",
+    "postcss": "^8.4.24",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2"
   }

apps/docs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  };

apps/docs/tailwind.config.js

@@ -1,9 +1,6 @@
+const inSpatialTailwindConfig = require("@inspatial/tailwind-config");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-
+  presets: [inSpatialTailwindConfig],
+};

apps/docs/tsconfig.json

@@ -6,6 +6,6 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
-  ],
+, "tailwind.config.js"  ],
   "exclude": ["node_modules"]
 }

packages/config/tailwind-config/README.md

@@ -17,15 +17,15 @@ _🎨 Elevate your UI with InSpatial's custom Tailwind CSS configurations!_
 
 ## 🚀 Features
 
-- Complete rewrite of the default Tailwind configuration
+- Partial override of the default Tailwind configuration at [![Tailwind](https://tailwindcss.com/_next/static/media/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg)](https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js)
 - InSpatial's new default styling primitives and variables
 - Seamless integration with InSpatial apps or any Tailwind CSS project
 - Optimized for spatial computing and cross-platform development
 
 ## 📦 Install InSpatial Tailwind Config
 
 ```bash
-npm install @inspatial/tailwind-config
+npm install -D @inspatial/tailwind-config tailwindcss
 ```
 
 ---
@@ -35,25 +35,72 @@ npm install @inspatial/tailwind-config
 Extend your `tailwind.config.ts` file with InSpatial's custom configuration:
 
 ```ts
-import type { Config } from "tailwindcss";
-import inSpatialTailwindConfig from "@inspatial/tailwind-config";
-
-const config: Config = {
-  content: [
-    // ... your content configuration
-  ],
-  theme: {
-    extend: {
-      ...inSpatialTailwindConfig,
-    },
-  },
-  plugins: [
-    // ... your plugins
-  ],
+const inSpatialTailwindConfig = require("@inspatial/tailwind-config");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [inSpatialTailwindConfig],
+  // Optional: Add project specific configurations e.g
+  // content: [],
+  // theme: {
+  //   extend: {},
+  // },
+  // plugins: [],
+  // ... more configurations
 };
-export default config;
 ```
 
+## 📚 Documentation
+
+## Good to know
+Adding the following configuration values will override InSpatial's Tailwind Config default ones. 
+
+#### - `content`
+
+By default InSpatial takes a primitive guess at what you might want to include in your content array, however it is recommended that you override this by providing your own content array based on prroject structure and framework. Here's an example of what this might look like if you are using Next.js or similar framework:
+
+```js
+content: [
+  "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+  "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  "./app/**/*.{js,ts,jsx,tsx,mdx}",
+]
+
+```
+
+**NOTE:** Do not overide if you are using InSpatial Run, as it will be populated with the correct paths for your project.
+
+--- 
+
+Other configuration values are optional, however if you do provide them they will not override InSpatial's defaults but will extend them e.g 
+
+#### - `separator`
+#### - `blocklist`
+#### - `corePlugins`
+#### - `safelist`
+#### - `prefix`
+etc...
+
+#### - `theme`
+Theme is multi-faceted because you can override as well as extend. 
+
+```js
+theme: {
+  extend: {}
+}
+```
+
+If you put your theme configurations inside the extend attribute it will merge and keep InSpatial's defaults instead of overriding them which is what we you want, however you can overide this too by  passing your values directly inside the theme: {} in your theme config - which will result in InSpatial's defaults being overridden.
+
+ **Note**: You probably don't want to override the theme seeing as this particular config is what makes InSpatial apps look the way they do! However if you find yourself doing this, you might want to consider removing the InSpatial Tailwind Config package and only using it as a guide to build your own.  
+
+### Dependencies
+- InSpatial Tailwind Config is built on top of [Tailwind CSS](https://tailwindcss.com/), so all the Tailwind CSS documentation and guides apply.
+- InSpatial Tailwind Config is built with [Tailwind CSS Typography Plugin](https://github.com/tailwindcss/typography), so all the Tailwind CSS Typography documentation and guides apply.
+- InSpatial Tailwind Config is built with [Tailwind CSS 3D Transforms Plugin](https://github.com/XPD-Kasun/tailwind-3dtransform-plugin), so all the Tailwind CSS 3D Transforms documentation and guides apply.
+
+
 ---
 
 ## 🎭 What's Included?

packages/config/tailwind-config/package.json

@@ -1,15 +1,27 @@
 {
   "name": "@inspatial/tailwind-config",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Tailwind CSS configuration for Inspatial Apps",
-  "main": "tailwind.config.ts",
+  "main": "src/index.ts",
   "files": [
-    "tailwind.config.ts"
+    "src/**/*"
   ],
   "peerDependencies": {
     "tailwindcss": "^3.4.13 || ^4.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.16.10"
+    "@types/node": "^20.16.11",
+    "@types/tailwindcss": "^3.1.0",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.9",
+    "@xpd/tailwind-3dtransforms": "^1.0.3",
+    "mini-svg-data-uri": "^1.4.4",
+    "tailwind-merge": "^2.5.3",
+    "tailwind-scrollbar": "^3.1.0",
+    "tailwind-variants": "^0.2.1"
   }
 }

packages/config/tailwind-config/plugins/add-grid-backgrounds.ts

@@ -0,0 +1,24 @@
+import svgToDataUri from 'mini-svg-data-uri';
+import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';
+import plugin from 'tailwindcss/plugin';
+
+/**
+ * This function creates a grid pattern for backgrounds using SVGs.
+ */
+export const addGridBackgrounds = plugin(({ matchUtilities, theme }) => {
+  matchUtilities(
+    {
+      "bg-grid": (value) => ({
+        backgroundImage: `url("${svgToDataUri(
+          `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
+        )}")`,
+      }),
+      "bg-dot": (value) => ({
+        backgroundImage: `url("${svgToDataUri(
+          `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
+        )}")`,
+      }),
+    },
+    { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
+  );
+});