setup(css-library): setup tailwind for all apps with global config in…

… ui package (#15)

* setup(css-library): setup tailwind for all apps with global config in ui package

* setup(tailwind): created separate tailwind package and used it in all dependencies

setup(tailwind): bug fix in postcss

setup(tailwind): fix pnpm lock file

removed unused dependencies

---------

Co-authored-by: Yoganandan Pandiyan <[email protected]>

apps/admin/app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import "@repo/tailwind-config/css"
 
 export const metadata: Metadata = {
   title: "Create Next App",

apps/admin/package.json

@@ -9,17 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
+    "@repo/ui": "*",
     "next": "14.1.0",
-    "@repo/ui": "*"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.17",
     "eslint": "^8",
-    "eslint-config-next": "14.1.0"
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

apps/admin/postcss.config.js

@@ -0,0 +1 @@
+module.exports = require('@repo/tailwind-config/postcss-config');

apps/admin/tailwind.config.ts

@@ -0,0 +1 @@
+export * from "@repo/tailwind-config/tw-config";

apps/learner/package.json

@@ -9,17 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
+    "@repo/ui": "*",
     "next": "14.1.0",
-    "@repo/ui": "*"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.17",
     "eslint": "^8",
-    "eslint-config-next": "14.1.0"
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

apps/learner/postcss.config.js

@@ -0,0 +1 @@
+module.exports = require('@repo/tailwind-config/postcss-config');

apps/learner/tailwind.config.ts

@@ -0,0 +1 @@
+export * from "@repo/tailwind-config/tw-config";

package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
+    "@repo/tailwind-config": "workspace:*",
     "prettier": "^3.1.1",
     "turbo": "latest"
   },

packages/tailwind-config/.gitignore

@@ -0,0 +1 @@
+node_modules

packages/tailwind-config/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/tailwind-config/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@repo/tailwind-config",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "exports": {
+    "./postcss-config": "./postcss.config.js",
+    "./tw-config": "./tailwind.config.ts",
+    "./css": "./global.css"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
+  }
+}

packages/tailwind-config/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/tailwind-config/tailwind.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from "tailwindcss";
+
+const config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "../../packages/ui/src/**/*.{ts,tsx}",
+  ],
+  prefix: "",
+  theme: {},
+  plugins: [],
+} satisfies Config;
+
+export default config;

packages/ui/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/ui/package.json

@@ -2,7 +2,9 @@
   "name": "@repo/ui",
   "version": "0.0.0",
   "private": true,
-  "exports": "./src/index.ts",
+  "exports": {
+    "./*": "./src/index.ts"
+  },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "generate:component": "turbo gen react-component"
@@ -15,11 +17,13 @@
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
+    "admin": "^1.4.1",
+    "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
+    "learner": "^1.0.0",
     "postcss": "^8.4.33",
-    "postcss-preset-mantine": "^1.12.3",
-    "postcss-simple-vars": "^7.0.1",
     "react": "^18.2.0",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   }
 }

packages/ui/postcss.config.js

@@ -0,0 +1 @@
+module.exports = require('@repo/tailwind-config/postcss-config');

packages/ui/tailwind.config.ts

@@ -0,0 +1,2 @@
+export * from "@repo/tailwind-config/tw-config";
+