feat: add tailwind css config

codemitrayt · Apr 16, 2024 · fd8cc09 · fd8cc09
1 parent 725a4df
commit fd8cc09
Showing 1 changed file with 71 additions and 1 deletion.
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,7 +1,16 @@
+import plugin from "tailwindcss/plugin";
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
       colors: {
         white: {
@@ -66,7 +75,68 @@ export default {
           DEFAULT: "hsl(351 99% 66%)",
         },
       },
+      backgroundImage: {
+        "radial-gradient": "radial-gradient(var(--tw-gradient-stops))",
+        "button-gradient":
+          "linear-gradient(135deg,hsl(343 98% 60%),hsl(343 98% 60%) 61%,hsl(351 99% 66%))",
+        "conic-gradient":
+          "conic-gradient(red 0deg, red 40deg, yellow 40deg, yellow 100deg, green 100deg, green 180deg, blue 180deg, blue 270deg, pink 270deg)",
+      },
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ addBase, addComponents, addUtilities }) {
+      addBase({});
+      addComponents({
+        ".h1": {
+          "@apply font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] md:leading-[3.75rem] lg:text-[3.25rem] lg:leading-[4.0625rem] xl:text-[3.75rem] xl:leading-[4.5rem]":
+            {},
+        },
+        ".h2": {
+          "@apply text-[1.75rem] leading-[2.5rem] md:text-[2rem] md:leading-[2.5rem] lg:text-[2.5rem] lg:leading-[3.5rem] xl:text-[3rem] xl:leading-tight":
+            {},
+        },
+        ".h3": {
+          "@apply text-[2rem] leading-normal md:text-[2.5rem]": {},
+        },
+        ".h4": {
+          "@apply text-[2rem] leading-normal": {},
+        },
+        ".h5": {
+          "@apply text-2xl leading-normal": {},
+        },
+        ".h6": {
+          "@apply font-semibold text-lg leading-8": {},
+        },
+        ".body-1": {
+          "@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8":
+            {},
+        },
+        ".body-2": {
+          "@apply font-light text-[0.875rem] leading-6 md:text-base": {},
+        },
+        ".caption": {
+          "@apply text-sm": {},
+        },
+        ".tagline": {
+          "@apply font-light text-xs tracking-tagline uppercase": {},
+        },
+        ".quote": {
+          "@apply text-lg leading-normal": {},
+        },
+        ".button": {
+          "@apply text-xs font-bold tracking-wider": {},
+        },
+        ".glass-effect": {
+          "@apply backdrop-blur rounded-2xl bg-foreground/95 supports-[backdrop-filter]:bg-foreground/5 border border-foreground/20 p-5":
+            {},
+        },
+      });
+      addUtilities({
+        ".tap-highlight-color": {
+          "-webkit-tap-highlight-color": "rgba(0, 0, 0, 0)",
+        },
+      });
+    }),
+  ],
 };