TTC
Theo's Typesafe Cult•16mo ago
BigLung

updates to tailwind.config.ts not applying?

I have updated my tailwind.config.ts to set new theme colors all colors in the app used this definition for theme colors Unfortunately despite recloning the repo multiple times, nuking node modules, rebooting my pc. Everything I can think of for any sort of cached results, the colors are not updating... I have no manually specficied any colors in the app, everything is stuff like 
className="bg-primary" // etc
className="bg-primary" // etc
Additionally, I don't have any colors defined in my globals.css file either... I have no idea how this is happening 😭
1 Reply
BigLung
BigLungOP•16mo ago
my tailwind.config.ts 
import { type Config } from "tailwindcss";

const colors = require("tailwindcss/colors");

export const SECONDARY = "#E7FD32";
export const SUCCESS = "#47AA56";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    colors: {
      ...colors,
      primary: "#27465B",
      secondary: "#3CB9EA",
      tertiary: "#93C5D3",
      accent: "#C3E2E2",
      success: "#47AA56",
      backgroundInvert: "#F5F5EB",
      backgroundInvertAccent: "#d9ded7",
      "light-gray": "#E4E4E4",
      "dark-gray": "#B7BFCA",
      destructive: "#710a0b",
    },
    extend: {
      fontFamily: {
        "noto-serif": ["var(--font-noto-serif)"],
        "space-mono": ["var(--font-space-mono)"],
        "ibm-plex-mono": ["var(--font-ibm-mono)"],
        faktum: ["var(--font-faktum)"],
      },
      boxShadow: {
        outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
      },
      colors: {
        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))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
      },
    },
  },
  variants: {
    extend: {
      boxShadow: ["focus"],
    },
  },
  plugins: [],
} satisfies Config;
import { type Config } from "tailwindcss";

const colors = require("tailwindcss/colors");

export const SECONDARY = "#E7FD32";
export const SUCCESS = "#47AA56";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    colors: {
      ...colors,
      primary: "#27465B",
      secondary: "#3CB9EA",
      tertiary: "#93C5D3",
      accent: "#C3E2E2",
      success: "#47AA56",
      backgroundInvert: "#F5F5EB",
      backgroundInvertAccent: "#d9ded7",
      "light-gray": "#E4E4E4",
      "dark-gray": "#B7BFCA",
      destructive: "#710a0b",
    },
    extend: {
      fontFamily: {
        "noto-serif": ["var(--font-noto-serif)"],
        "space-mono": ["var(--font-space-mono)"],
        "ibm-plex-mono": ["var(--font-ibm-mono)"],
        faktum: ["var(--font-faktum)"],
      },
      boxShadow: {
        outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
      },
      colors: {
        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))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
      },
    },
  },
  variants: {
    extend: {
      boxShadow: ["focus"],
    },
  },
  plugins: [],
} satisfies Config;

Did you find this page helpful?