Theo's Typesafe Cult•14mo ago

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•14mo 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;

Gaming

Programming

updates to tailwind.config.ts not applying?