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

… ui package
kalvilabs · sidarth-23 · Feb 14, 2024 · Feb 13, 2024 · Feb 13, 2024 · Feb 14, 2024
commit 8d1a95af9a97b774ef3c87fd03a2647f079996f5
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import "@repo/ui/global.css"
 
 export const metadata: Metadata = {
   title: "Create Next App",

@@ -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"
   }
 }
@@ -0,0 +1 @@
+module.exports = require('@repo/ui/postcss.config');
@@ -0,0 +1 @@
+export * from "@repo/ui/tailwind.config";
diff --git a/apps/learner/app/layout.tsx b/apps/learner/app/layout.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
-import "@mantine/core/styles.css";
-import { Style } from "@repo/ui";
+import "@repo/ui/global.css"
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -15,9 +14,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <Style>
           <>{children}</>
-        </Style>
       </body>
     </html>
   );

@@ -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"
   }
 }
@@ -0,0 +1 @@
+module.exports = require('@repo/ui/postcss.config');
@@ -0,0 +1 @@
+export * from "@repo/ui/tailwind.config";
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -2,7 +2,12 @@
   "name": "@repo/ui",
   "version": "0.0.0",
   "private": true,
-  "exports": "./src/index.ts",
+  "exports": {
+    "./postcss.config": "./postcss.config.js",
+    "./tailwind.config": "./tailwind.config.ts",
+    "./*": "./src/index.ts",
+    "./global.css": "./global.css"
+  },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
     "generate:component": "turbo gen react-component"
@@ -15,11 +20,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"
   }
 }
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
@@ -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;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require('@repo/ui/postcss.config');