fix(ui-patterns): tailwind styles not being integrated (#1377)

Closes #1376 

## Proposed Changes

- Move all dependencies to prevent version mismatches
- Activate caching for `vite build`
- Point `postcss.config.js` to the proper `tailwind.config.js`

## Context

The issue arose from the inability of postcss.config.js to locate any
tailwind.config.js file for processing. This was due to its expectation
for tailwind.config.js to be located directly adjacent to it. Although
the tailwind configuration file was correctly positioned, the
introduction of Vite executors caused a change in the execution context,
resulting in it being executed from our root directory where
tailwind.config.js was not present.

```
// before introduction of vite executors
$ packages/ui-patterns > vite build // context -> packages/ui-patterns

// after introduction of vite executors
$ / > nx vite:build ui-patterns // context -> /
```

To resolve this issue, we need to utilize appropriate file paths within
postcss.config.js to correctly reference the location of
tailwind.config.js.

nx.json

@@ -70,6 +70,11 @@
     "@nx/vite:test": {
       "cache": true,
       "inputs": ["default", "^production"]
+    },
+    "@nx/vite:build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
     }
   },
   "generators": {

package.json

@@ -52,20 +52,30 @@
     "@types/css-font-loading-module": "^0.0.7",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "29.5.11",
+    "@types/node": "18.16.9",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
     "@types/shelljs": "^0.8.15",
     "@typescript-eslint/eslint-plugin": "6.13.2",
     "@typescript-eslint/parser": "6.13.2",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@vitest/ui": "^1.3.1",
+    "autoprefixer": "^10.4.16",
     "camelcase": "^6.2.0",
     "chalk": "^4.1.2",
     "conventional-changelog-angular": "^7.0.0",
     "conventional-recommended-bump": "^9.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-no-null": "^1.0.2",
     "eslint-plugin-playwright": "^0.15.3",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
     "fs-extra": "^9.0.0",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
@@ -79,13 +89,20 @@
     "postcss-url": "~10.1.3",
     "prettier": "^2.6.2",
     "prompts": "^2.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.55.0",
     "semver": "^7.5.4",
     "shelljs": "^0.8.4",
     "shx": "^0.3.2",
     "svgo": "^2.8.0",
+    "tailwindcss": "^3.3.3",
     "ts-node": "^10.9.1",
     "typescript": "~5.3.2",
     "vite": "~5.0.0",
+    "vite-plugin-dts": "^3.6.0",
+    "vite-plugin-static-copy": "^0.17.0",
+    "vitest": "^1.3.1",
     "yalc": "^1.0.0-pre.32"
   },
   "dependencies": {

packages/storybook/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "node_modules/*", "dist/*"],
+  "ignorePatterns": ["!**/*", "node_modules/*", "dist/*", "storybook-static"],
   "overrides": [
     {
       "files": ["src/**/*.{ts,js,tsx,jsx}"],

packages/ui-patterns-playground/package.json

@@ -5,23 +5,6 @@
   "type": "module",
   "dependencies": {
     "@inovex.de/elements-react": "^9.3.0",
-    "@inovex.de/ui-patterns": "^9.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^4.2.0",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.53.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
-    "postcss": "^8.4.32",
-    "tailwindcss": "^3.3.6",
-    "vite": "^4.5.2"
+    "@inovex.de/ui-patterns": "^9.3.0"
   }
 }

packages/ui-patterns-playground/postcss.config.js

@@ -1,6 +1,14 @@
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 export default {
   plugins: {
-    tailwindcss: {},
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
     autoprefixer: {},
   },
 };

packages/ui-patterns-playground/src/index.css

@@ -1,10 +1,10 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
 @import '@inovex.de/elements/dist/inovex-elements/inovex-elements.css';
 @import '@inovex.de/ui-patterns/dist/style.css';
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 #root {
   height: 100vh;
 }

packages/ui-patterns-playground/tailwind.config.js

@@ -1,6 +1,8 @@
+import { join } from 'path';
+
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,html}')],
   theme: {
     extend: {
       colors: {

packages/ui-patterns/package.json

@@ -22,23 +22,8 @@
     "dist",
     "package.json"
   ],
-  "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "autoprefixer": "^10.4.16",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.3",
-    "vite": "^4.4.5",
-    "vite-plugin-dts": "^3.6.0",
-    "vite-plugin-static-copy": "^0.17.0"
-  },
   "peerDependencies": {
-    "@inovex.de/elements-react": "^9.0.0",
+    "@inovex.de/elements-react": "^9.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

packages/ui-patterns/postcss.config.js

@@ -1,6 +1,14 @@
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 export default {
   plugins: {
-    tailwindcss: {},
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
     autoprefixer: {},
   },
 };

packages/ui-patterns/src/index.css

@@ -1,3 +1,3 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/ui-patterns/tailwind.config.js

@@ -1,6 +1,8 @@
+import { join } from 'path';
+
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,html}'],
+  content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,html}')],
   theme: {
     extend: {
       colors: {