expose the used config via tw.config

.changeset/sweet-kings-ring.md

@@ -0,0 +1,5 @@
+---
+'twind': patch
+---
+
+expose the used config via `tw.config`

package.json

@@ -56,13 +56,13 @@
       "name": "@twind/cdn",
       "path": "packages/cdn/dist/cdn.esnext.js",
       "brotli": true,
-      "limit": "15kb"
+      "limit": "15.1kb"
     },
     {
       "name": "@twind/tailwind",
       "path": "packages/tailwind/dist/tailwind.esnext.js",
       "brotli": true,
-      "limit": "14.95kb"
+      "limit": "15kb"
     }
   ],
   "// start — use 'BROWSER=none' to prevent vite to open a browser if within codesandbox or stackblitz": "",

packages/cdn/package.json

@@ -32,7 +32,7 @@
       "name": "@twind/cdn",
       "path": "dist/cdn.esnext.js",
       "brotli": true,
-      "limit": "15kb"
+      "limit": "15.1kb"
     }
   ],
   "dependencies": {

packages/cdn/src/index.ts

@@ -52,5 +52,5 @@ export function setup(
 ): Twind {
   cancelAutoSetup()
 
-  return observe(twind(defineConfig(config as TwindConfig), sheet), target)
+  return observe(twind(defineConfig(config as TwindConfig), sheet), target) as unknown as Twind
 }

packages/tailwind/src/index.ts

@@ -70,7 +70,7 @@ export function setup(
   sheet?: Sheet,
   target?: HTMLElement,
 ): Twind {
-  return setup$(defineConfig(config as TwindUserConfig), sheet, target)
+  return setup$(defineConfig(config as TwindUserConfig), sheet, target) as unknown as Twind
 }
 
 // If we run in the browser as `<script src="..."></script>` patch twind to use our setup and defineConfig

packages/twind/src/observe.ts

@@ -4,7 +4,7 @@ import { changed } from './internal/changed'
 import { tw as tw$ } from './runtime'
 
 export function observe<Theme extends BaseTheme = BaseTheme, Target = unknown>(
-  tw: Twind<Theme, Target> = tw$ as Twind<Theme, Target>,
+  tw: Twind<Theme, Target> = tw$ as unknown as Twind<Theme, Target>,
   target = typeof document != 'undefined' && document.documentElement,
 ): Twind<Theme, Target> {
   if (!target) return tw

packages/twind/src/runtime.ts

@@ -60,7 +60,9 @@ export const tw = /* @__PURE__ */ Object.defineProperties(
     theme(...args: unknown[]) {
       return active.theme(...(args as []))
     },
-
+    get config() {
+      return active.config
+    },
     clear() {
       return active.clear()
     },
@@ -108,7 +110,7 @@ export function setup<Theme extends BaseTheme = BaseTheme, SheetTarget = unknown
     active.destroy()
   }
 
-  active = observe(twind(config as TwindUserConfig<Theme>, sheet), target)
+  active = observe(twind(config as TwindUserConfig, sheet), target)
 
   if (firstRun && typeof document != 'undefined') {
     // first run in browser
@@ -120,5 +122,5 @@ export function setup<Theme extends BaseTheme = BaseTheme, SheetTarget = unknown
     }
   }
 
-  return active as Twind<Theme, SheetTarget>
+  return active as unknown as Twind<Theme, SheetTarget>
 }

packages/twind/src/tests/twind.test.ts

@@ -0,0 +1,26 @@
+import { assert, test, afterEach } from 'vitest'
+
+import { twind, virtual, css } from '..'
+
+const tw = twind(
+  {
+    rules: [['bg-', 'background']],
+  },
+  virtual(),
+)
+
+afterEach(() => tw.clear())
+
+test('the config can accessed', () => {
+  assert.isFunction(tw.config.stringify)
+  assert.deepEqual(tw.config, {
+    preflight: [],
+    darkMode: undefined,
+    theme: { extend: {} },
+    variants: [['dark', '@media (prefers-color-scheme:dark)']],
+    rules: [['bg-', 'background']],
+    ignorelist: [],
+    hash: undefined,
+    stringify: tw.config.stringify,
+  })
+})

packages/twind/src/twind.ts

@@ -125,6 +125,8 @@ export function twind(userConfig: TwindConfig<any> | TwindUserConfig<any>, sheet
 
       theme: context.theme,
 
+      config,
+
       clear() {
         sheet.clear()
         insertedRules.clear()

packages/twind/src/types.ts

@@ -73,7 +73,9 @@ export interface Twind<Theme extends BaseTheme = BaseTheme, Target = unknown> {
 
   readonly target: Target
 
-  theme: ThemeFunction<ExtractUserTheme<Theme>>
+  readonly theme: ThemeFunction<ExtractUserTheme<Theme>>
+
+  readonly config: TwindConfig<Theme>
 
   /** Clears all CSS rules from the sheet. */
   clear(): void