chore: extract tailwind config (#499)

* extract tailwind config package

* use shared config in extension

* use shared tailwind config in example app

* use shared tailwind config in app

* use shared tailwind config for landing page

* remove important modifier

.cspell.json

@@ -104,6 +104,7 @@
     "**/renovate.json",
     "**/esbuild.js",
     "**/tailwind.config.js",
+    "**/tailwind.config.mjs",
     "**/tailwind.config.ts",
     "**/vite.config.ts",
     "**/entry.server.tsx",

configs/tailwind/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@zodiac/tailwind-config",
+  "private": true,
+  "type": "module",
+  "license": "UNLICENSED",
+  "sideEffects": false,
+  "packageManager": "[email protected]",
+  "main": "./tailwind.config.mjs",
+  "exports": {
+    ".": {
+      "import": "./tailwind.config.mjs",
+      "default": "./tailwind.config.mjs"
+    }
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "tailwindcss": "3.4.17"
+  }
+}

configs/tailwind/tailwind.config.mjs

@@ -0,0 +1,16 @@
+export default {
+  content: [
+    './src/**/*.{tsx,html}',
+    './app/**/*.tsx',
+    './public/*.html',
+    './node_modules/@zodiac/ui/**/*.tsx',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        mono: '"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      },
+    },
+  },
+  plugins: [],
+}

deployables/app/package.json

@@ -32,6 +32,7 @@
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
     "@vitest/coverage-v8": "2.1.8",
+    "@zodiac/tailwind-config": "workspace:*",
     "@zodiac/test-utils": "workspace:*",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.7.0",

deployables/app/tailwind.config.ts

@@ -1,25 +1,4 @@
+import zodiacTailwindConfig from '@zodiac/tailwind-config'
 import type { Config } from 'tailwindcss'
 
-export default {
-  content: [
-    './app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}',
-    '../../packages/ui/**/*.tsx',
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: [
-          '"Inter"',
-          'ui-sans-serif',
-          'system-ui',
-          'sans-serif',
-          '"Apple Color Emoji"',
-          '"Segoe UI Emoji"',
-          '"Segoe UI Symbol"',
-          '"Noto Color Emoji"',
-        ],
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config
+export default zodiacTailwindConfig satisfies Config

deployables/example-app/package.json

@@ -31,6 +31,7 @@
     "@types/chrome": "^0.0.290",
     "@types/react": "^19.0.0",
     "@zodiac/eslint-config": "workspace:*",
+    "@zodiac/tailwind-config": "workspace:*",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.7.0",
     "globals": "^15.8.0",

deployables/example-app/tailwind.config.ts

@@ -1,9 +1,4 @@
+import zodiacTailwindConfig from '@zodiac/tailwind-config'
 import type { Config } from 'tailwindcss'
 
-export default {
-  content: ['./app/**/*.tsx'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config
+export default zodiacTailwindConfig satisfies Config

deployables/extension/package.json

@@ -52,6 +52,7 @@
     "@walletconnect/sign-client": "2.17.3",
     "@walletconnect/universal-provider": "2.17.3",
     "@zodiac/eslint-config": "workspace:*",
+    "@zodiac/tailwind-config": "workspace:*",
     "@zodiac/test-utils": "workspace:*",
     "autoprefixer": "^10.4.20",
     "classnames": "^2.3.1",

deployables/extension/tailwind.config.js

@@ -1,18 +1,7 @@
+import zodiacTailwindConfig from '@zodiac/tailwind-config'
+
 /** @type {import('tailwindcss').Config} */
 export default {
+  ...zodiacTailwindConfig,
   important: true,
-  content: [
-    './src/**/*.tsx',
-    './public/*.html',
-    './src/**/*.html',
-    '../../packages/ui/**/*.tsx',
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        mono: '"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-      },
-    },
-  },
-  plugins: [],
 }

deployables/landing-page/package.json

@@ -15,6 +15,7 @@
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",
     "@zodiac/eslint-config": "workspace:*",
+    "@zodiac/tailwind-config": "workspace:*",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.7.0",
     "postcss": "^8.4.47",

deployables/landing-page/tailwind.config.ts

@@ -1,16 +1,9 @@
+import zodiacTailwindConfig from '@zodiac/tailwind-config'
 import type { Config } from 'tailwindcss'
 
 const tailwindConfig = {
-  important: true,
-  content: ['./src/**/*.tsx', './index.html', '../../packages/ui/**/*.tsx'],
-  theme: {
-    extend: {
-      fontFamily: {
-        mono: '"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-      },
-    },
-  },
-  plugins: [],
+  ...zodiacTailwindConfig,
+  content: [...zodiacTailwindConfig.content, './index.html'],
 } satisfies Config
 
 export default tailwindConfig