feat: add tw + radix colors (nandanmen#79)

AOMJ2PMP · Mar 14, 2023 · bac0cf7 · bac0cf7
1 parent 4511530
commit bac0cf7
Show file tree

Hide file tree

Showing 7 changed files with 287 additions and 13 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,16 +1,18 @@
+import "./styles.css";
+
 export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
-}
+  title: "Next.js",
+  description: "Generated by Next.js",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/app/styles.css b/app/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/package.json b/package.json
@@ -55,12 +55,15 @@
     "@types/node": "^18.6.3",
     "@types/react": "^18.0.15",
     "@types/uuid": "^9.0.0",
+    "autoprefixer": "^10.4.14",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "concurrently": "^7.3.0",
     "eslint": "8.20.0",
     "eslint-config-next": "12.2.3",
     "next-remote-watch": "^1.0.0",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
     "typescript": "^4.7.4"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/stitches.config.ts b/stitches.config.ts
@@ -8,7 +8,6 @@ import {
   grayDark,
   blueDark,
   yellowDark,
-  redDark,
 } from "@radix-ui/colors";
 
 const SPACING = {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,23 @@
+const { gray, blue, green, red, yellow } = require("@radix-ui/colors");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./app/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        ...gray,
+        ...blue,
+        ...green,
+        ...red,
+        ...yellow,
+      },
+      fontFamily: {
+        serif: `PP Editorial New, ui-serif, Georgia, serif`,
+        mono: `JetBrains Mono, ui-monospace, Menlo, Monaco, "Segoe UI Mono", "Roboto Mono", monospace`,
+        sans: `Nunito, system-ui, -apple-system, sans-serif`,
+      },
+    },
+  },
+  plugins: [],
+};