mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-04-30 03:00:41 -04:00
36634b7ba2
We're encountering a hydration warning on the frontend due to a mismatch in CSS module hashes. This happens because auto-generated classnames from `next/font` and `geist` differ between server-side and client-side rendering. The inconsistency triggers a warning when the client rehydrates the server-rendered HTML.  ### Changes 🏗️ Since the mismatch only affects the `<html>` tag and has no visible impact on the UI, the most straightforward workaround is to suppress the warning and still take advantage of `next/font` optimisations. ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Run the frontend locally - [x] Page loads without hydration warnings --------- Co-authored-by: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
148 lines
3.8 KiB
TypeScript
148 lines
3.8 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const config = {
|
|
darkMode: ["class"],
|
|
content: ["./src/**/*.{ts,tsx}"],
|
|
prefix: "",
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: "2rem",
|
|
screens: {
|
|
"2xl": "1400px",
|
|
},
|
|
},
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ["var(--font-geist-sans)"],
|
|
mono: ["var(--font-geist-mono)"],
|
|
poppins: ["var(--font-poppins)"],
|
|
},
|
|
colors: {
|
|
border: "hsl(var(--border))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
background: "hsl(var(--background))",
|
|
foreground: "hsl(var(--foreground))",
|
|
primary: {
|
|
DEFAULT: "hsl(var(--primary))",
|
|
foreground: "hsl(var(--primary-foreground))",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "hsl(var(--secondary))",
|
|
foreground: "hsl(var(--secondary-foreground))",
|
|
},
|
|
destructive: {
|
|
DEFAULT: "hsl(var(--destructive))",
|
|
foreground: "hsl(var(--destructive-foreground))",
|
|
},
|
|
muted: {
|
|
DEFAULT: "hsl(var(--muted))",
|
|
foreground: "hsl(var(--muted-foreground))",
|
|
},
|
|
accent: {
|
|
DEFAULT: "hsl(var(--accent))",
|
|
foreground: "hsl(var(--accent-foreground))",
|
|
},
|
|
popover: {
|
|
DEFAULT: "hsl(var(--popover))",
|
|
foreground: "hsl(var(--popover-foreground))",
|
|
},
|
|
card: {
|
|
DEFAULT: "hsl(var(--card))",
|
|
foreground: "hsl(var(--card-foreground))",
|
|
},
|
|
// Extend the color palette with custom colors
|
|
customGray: {
|
|
100: "#d9d9d9",
|
|
200: "#a8a8a8",
|
|
300: "#878787",
|
|
400: "#646464",
|
|
500: "#474747",
|
|
600: "#282828",
|
|
700: "#272727",
|
|
},
|
|
},
|
|
spacing: {
|
|
// Tailwind spacing + custom sizes
|
|
0: "0rem",
|
|
0.5: "0.125rem",
|
|
1: "0.25rem",
|
|
1.5: "0.375rem",
|
|
2: "0.5rem",
|
|
2.5: "0.625rem",
|
|
3: "0.75rem",
|
|
3.5: "0.875rem",
|
|
4: "1rem",
|
|
5: "1.25rem",
|
|
6: "1.5rem",
|
|
7: "1.75rem",
|
|
7.5: "1.875rem",
|
|
8: "2rem",
|
|
8.5: "2.125rem",
|
|
9: "2.25rem",
|
|
10: "2.5rem",
|
|
11: "2.75rem",
|
|
12: "3rem",
|
|
14: "3.5rem",
|
|
16: "4rem",
|
|
18: "4.5rem",
|
|
20: "5rem",
|
|
24: "6rem",
|
|
28: "7rem",
|
|
32: "8rem",
|
|
36: "9rem",
|
|
40: "10rem",
|
|
44: "11rem",
|
|
48: "12rem",
|
|
52: "13rem",
|
|
56: "14rem",
|
|
60: "15rem",
|
|
64: "16rem",
|
|
68: "17rem",
|
|
70: "17.5rem",
|
|
71: "17.75rem",
|
|
72: "18rem",
|
|
76: "19rem",
|
|
80: "20rem",
|
|
96: "24rem",
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
// Add a full radius for pill-shaped buttons
|
|
full: "9999px",
|
|
},
|
|
boxShadow: {
|
|
subtle: "0px 1px 2px 0px rgba(0,0,0,0.05)",
|
|
},
|
|
keyframes: {
|
|
"accordion-down": {
|
|
from: { height: "0" },
|
|
to: { height: "var(--radix-accordion-content-height)" },
|
|
},
|
|
"accordion-up": {
|
|
from: { height: "var(--radix-accordion-content-height)" },
|
|
to: { height: "0" },
|
|
},
|
|
"fade-in": {
|
|
"0%": { opacity: "0" }, // Start with opacity 0
|
|
"100%": { opacity: "1" }, // End with opacity 1
|
|
},
|
|
},
|
|
animation: {
|
|
"accordion-down": "accordion-down 0.2s ease-out",
|
|
"accordion-up": "accordion-up 0.2s ease-out",
|
|
"fade-in": "fade-in 0.2s ease-out",
|
|
},
|
|
transitionDuration: {
|
|
"2000": "2000ms",
|
|
},
|
|
},
|
|
},
|
|
plugins: [require("tailwindcss-animate")],
|
|
} satisfies Config;
|
|
|
|
export default config;
|