docs: update foundations README.md for tailwind.config use with TS (#…

…2753)
db-ui · Jun 17, 2024 · 82e96eb · 82e96eb
1 parent bd87e31
commit 82e96eb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/foundations/README.md b/packages/foundations/README.md
@@ -206,6 +206,8 @@ In HTML:
 Check the required imports for [CSS](https://db-ui.github.io/mono/review/main/foundations/readme?current=css) to enable all tokens and defaults.
 After this you can extend your tailwind config like this:
 
+#### Javascript
+
 ```javascript
 //tailwind.config.js
 /** @type {import('tailwindcss').Config} */
@@ -226,6 +228,30 @@ export default {
 };
 ```
 
+#### Typescript
+
+```typescript
+//tailwind.config.ts
+import type { Config } from "tailwindcss";
+import { CustomThemeConfig } from "tailwindcss/types/config";
+import tokens from "@db-ui/foundations/build/tailwind/tailwind-tokens.json";
+const customThemeConfig: CustomThemeConfig = tokens as any;
+
+export default {
+	content: [],
+	theme: {
+		...customThemeConfig,
+		gap: ({ theme }) => ({
+			...theme("spacing")
+		}),
+		space: ({ theme }) => ({
+			...theme("spacing")
+		})
+	},
+	plugins: []
+} satisfies Config;
+```
+
 In your `tailwind.css` add this to enable default headlines:
 
 ```css

diff --git a/packages/foundations/tailwind/tailwind-tokens.json b/packages/foundations/tailwind/tailwind-tokens.json
@@ -155,7 +155,7 @@
 	},
 	"borderRadius": {
 		"DEFAULT": "var(--db-border-radius-xs)",
-		"none": 0,
+		"none": "0px",
 		"3xs": "var(--db-border-radius-3xs)",
 		"2xs": "var(--db-border-radius-2xs)",
 		"xs": "var(--db-border-radius-xs)",
@@ -169,7 +169,7 @@
 	},
 	"borderWidth": {
 		"DEFAULT": "var(--db-border-height-3xs)",
-		"none": 0,
+		"none": "0px",
 		"3xs": "var(--db-border-height-3xs)",
 		"2xs": "var(--db-border-height-2xs)",
 		"xs": "var(--db-border-height-xs)",
@@ -194,8 +194,8 @@
 		"lg": "var(--db-elevation-lg)"
 	},
 	"spacing": {
-		"none": 0,
-		"0": 0,
+		"none": "0px",
+		"0": "0px",
 		"fix-3xs": "var(--db-spacing-fixed-3xs)",
 		"fix-2xs": "var(--db-spacing-fixed-2xs)",
 		"fix-xs": "var(--db-spacing-fixed-xs)",