tailwind

2024-07-16 13:11:06 +08:00 · 2024-07-16 13:11:06 +08:00 · da63ff64e8
parent 731e979f75
commit da63ff64e8
2 changed files with 167 additions and 10 deletions
--- a/index.html
+++ b/index.html
@ -1,12 +1,107 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React + TS</title>
+  <script src="/tailwindcss.js"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          spacing: {
+            "8xl": "96rem",
+            "9xl": "128rem",
+          },
+          borderRadius: {
+            "4xl": "2rem",
+          },
+          fontFamily: {
+            display: "Oswald, ui-serif ", // Adds a new `font-display` class
+          },
+          colors: {
+            primary: {
+              1: "var(--primary-1)",
+              2: "var(--primary-2)",
+              3: "var(--primary-3)",
+              4: "var(--primary-4)",
+              5: "var(--primary-5)",
+              6: "var(--primary-6)",
+              7: "var(--primary-7)",
+            },
+            success: {
+              1: "var(--success-1)",
+              2: "var(--success-2)",
+              3: "var(--success-3)",
+              4: "var(--success-4)",
+              5: "var(--success-5)",
+              6: "var(--success-6)",
+              7: "var(--success-7)",
+            },
+            warning: {
+              1: "var(--warning-1)",
+              2: "var(--warning-2)",
+              3: "var(--warning-3)",
+              4: "var(--warning-4)",
+              5: "var(--warning-5)",
+              6: "var(--warning-6)",
+              7: "var(--warning-7)",
+            },
+            danger: {
+              1: "var(--danger-1)",
+              2: "var(--danger-2)",
+              3: "var(--danger-3)",
+              4: "var(--danger-4)",
+              5: "var(--danger-5)",
+              6: "var(--danger-6)",
+              7: "var(--danger-7)",
+            },
+            link: {
+              1: "var(--link-1)",
+              2: "var(--link-2)",
+              3: "var(--link-3)",
+              4: "var(--link-4)",
+              5: "var(--link-5)",
+              6: "var(--link-6)",
+              7: "var(--link-7)",
+            },
+            background: {
+              1: "var(--color-bg-1)",
+              2: "var(--color-bg-2)",
+              3: "var(--color-bg-3)",
+              4: "var(--color-bg-4)",
+              5: "var(--color-bg-5)",
+              white: "var(--color-bg-white)",
+            },
+            text: {
+              1: "var(--color-text-1)",
+              2: "var(--color-text-2)",
+              3: "var(--color-text-3)",
+              4: "var(--color-text-4)",
+            },
+            border: {
+              1: "var(--color-border-1)",
+              2: "var(--color-border-2)",
+              3: "var(--color-border-3)",
+              4: "var(--color-border-4)",
+            },
+            fill: {
+              1: "var(--color-fill-1)",
+              2: "var(--color-fill-2)",
+              3: "var(--color-fill-3)",
+              4: "var(--color-fill-4)",
+            },
+          },
+        },
+      }
+    }
+  </script>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
--- a/public/tailwindcss.js
+++ b/public/tailwindcss.js