chore: update example

Author: nado1001

example/with-css-variables/sd.config.js

@@ -2,10 +2,13 @@ const StyleDictionaryModule = require('style-dictionary')
 const { makeSdTailwindConfig } = require('sd-tailwindcss-transformer')
 // const { makeSdTailwindConfig } = require('../../dist')
 
+const PREFIX = 'tw-'
+
 const sdConfig = makeSdTailwindConfig({
   type: 'all',
   formatType: 'cjs',
   isVariables: true,
+  prefix: PREFIX,
   source: [`./style-dictionary/tokens/**/*.json`],
   transforms: ['attribute/cti', 'name/cti/kebab'],
   buildPath: `./`,
@@ -19,6 +22,7 @@ const sdConfig = makeSdTailwindConfig({
 })
 
 sdConfig.platforms['css'] = {
+  prefix: PREFIX,
   transformGroup: 'css',
   buildPath: './styles/',
   files: [

example/with-css-variables/styles/tailwind.css

@@ -1,24 +1,24 @@
 /**
  * Do not edit directly
- * Generated on Sun, 18 Jun 2023 09:44:57 GMT
+ * Generated on Wed, 15 Nov 2023 12:36:10 GMT
  */
 
 :root {
-  --colors-base-gray-light: #CCCCCC;
-  --colors-base-gray-medium: #999999;
-  --colors-base-gray-dark: #111111;
-  --colors-base-red: #FF0000;
-  --colors-base-green: #00FF00;
-  --colors-font-base: #FF0000;
-  --colors-font-secondary: #00FF00;
-  --colors-font-tertiary: #CCCCCC;
-  --font-size-small: 0.75rem;
-  --font-size-medium: 1rem;
-  --font-size-large: 2rem;
-  --font-size-base: 1rem;
-  --border-radius-none: 0;
-  --border-radius-sm: .125rem;
-  --border-radius-default: 1rem;
-  --border-radius-lg: .5rem;
-  --border-radius-full: 9999px;
+  --tw-colors-base-gray-light: #CCCCCC;
+  --tw-colors-base-gray-medium: #999999;
+  --tw-colors-base-gray-dark: #111111;
+  --tw-colors-base-red: #FF0000;
+  --tw-colors-base-green: #00FF00;
+  --tw-colors-font-base: #FF0000;
+  --tw-colors-font-secondary: #00FF00;
+  --tw-colors-font-tertiary: #CCCCCC;
+  --tw-font-size-small: 0.75rem;
+  --tw-font-size-medium: 1rem;
+  --tw-font-size-large: 2rem;
+  --tw-font-size-base: 1rem;
+  --tw-border-radius-none: 0;
+  --tw-border-radius-sm: .125rem;
+  --tw-border-radius-default: 1rem;
+  --tw-border-radius-lg: .5rem;
+  --tw-border-radius-full: 9999px;
 }

example/with-css-variables/tailwind.config.cjs

@@ -8,31 +8,31 @@
       colors: {
         base: {
           gray: {
-            light: "var(--colors-base-gray-light)",
-            medium: "var(--colors-base-gray-medium)",
-            dark: "var(--colors-base-gray-dark)"
+            light: "var(--tw-colors-base-gray-light)",
+            medium: "var(--tw-colors-base-gray-medium)",
+            dark: "var(--tw-colors-base-gray-dark)"
           },
-          red: "var(--colors-base-red)",
-          green: "var(--colors-base-green)"
+          red: "var(--tw-colors-base-red)",
+          green: "var(--tw-colors-base-green)"
         },
         font: {
-          base: "var(--colors-font-base)",
-          secondary: "var(--colors-font-secondary)",
-          tertiary: "var(--colors-font-tertiary)"
+          base: "var(--tw-colors-font-base)",
+          secondary: "var(--tw-colors-font-secondary)",
+          tertiary: "var(--tw-colors-font-tertiary)"
         }
       },
       fontSize: {
-        small: "var(--font-size-small)",
-        medium: "var(--font-size-medium)",
-        large: "var(--font-size-large)",
-        base: "var(--font-size-base)"
+        small: "var(--tw-font-size-small)",
+        medium: "var(--tw-font-size-medium)",
+        large: "var(--tw-font-size-large)",
+        base: "var(--tw-font-size-base)"
       },
       borderRadius: {
-        none: "var(--border-radius-none)",
-        sm: "var(--border-radius-sm)",
-        DEFAULT: "var(--border-radius-default)",
-        lg: "var(--border-radius-lg)",
-        full: "var(--border-radius-full)"
+        none: "var(--tw-border-radius-none)",
+        sm: "var(--tw-border-radius-sm)",
+        DEFAULT: "var(--tw-border-radius-default)",
+        lg: "var(--tw-border-radius-lg)",
+        full: "var(--tw-border-radius-full)"
       }
     },
   },