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

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: {