Next.js Discord

Discord Forum

Huge issue with NextJS and Tailwind. All of my global css variables randomly stopped working.

Answered
Cape lion posted this in #help-forum
Open in Discord
Avatar
Cape lionOP
I have already tried reinstalling all packages, clearing .next, etc.

Here is my globals.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer { @tailwind base; {
  
  .light {
    VARIABLES
  }

  .dark {
    --background: 202 7% 3%;
    VARIABLES
  }
}
}

@layer components {
  Nothing here works either
}


My layout file:
...
import "./global.css";

...

<html lang="en" className="overflow-hidden dark">
      <body className={franklin.className}>
            <div className="flex flex-col h-full bg-background">
              <div className="sticky top-0 z-50 pb-[1px] bg-gradient-to-r from-header via-foreground-dull to-header">
                <header className="bg-header flex items-center h-header-height w-full">
                  <div className="flex items-center justify-between h-full w-full p-2">
                    <div className="flex items-center">

...
Answered by Cape lion
Got rid of the base layer in my globals.css file and it resolved itself. Makes sense but still weird how there were no issues before.
View full answer

3 Replies

Avatar
Cape lionOP
Tailwind config:
import type { Config } from "tailwindcss";

function addVariablesForColors({ addBase, theme }: any) {
  let allColors = flattenColorPalette(theme("colors"));
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
  );

  addBase({
    ":root": newVars,
  });
}

const config = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: {
          DEFAULT: "hsl(var(--foreground))",
          special: "hsl(var(--foreground-special))",
          dull: "hsl(var(--foreground-dull))",
        },
        header: "hsl(var(--header))",
        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))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
...
I dont know what is causing this. I was in dev mode, refreshed the page, and this persistent issue has just stuck here
Avatar
Cape lionOP
Got rid of the base layer in my globals.css file and it resolved itself. Makes sense but still weird how there were no issues before.
Answer