Tailwindcss custom colors not working after updating nextjs

49 Views Asked by At

I updated both nextjs (13.1.6 -> 15.5.2) and tailwindcss (3.1.15 -> 3.3.3) and now the custom colors inside the tailwind.config.js are not loaded anymore, but there are used only the default colors palettes. I followed this guide to update it.

tailwind.config.js before update:

module.exports = {
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        "courier-new": ["Courier New"],
        courier: ["Courier"],
        verdana: ["Verdana"],
      },
    },
    colors: {
      black: "#121212",
      white: "#faffff",
      gray: {
        50: "#E8E8E8",
        100: "#D1D1D1",
        200: "#A3A3A3",
        300: "#787878",
        400: "#4A4A4A",
        500: "#1C1C1C",
        600: "#171717",
        700: "#121212",
        800: "#0A0A0A",
        900: "#050505",
      },
      blue: colors.blue,
    },
  },
  plugins: [require("@tailwindcss/line-clamp")],
};

tailwind.config.js after update:

/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");

module.exports = {
  darkMode: "class",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        "courier-new": ["Courier New"],
        courier: ["Courier"],
        verdana: ["Verdana"],
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      backgroundColor: ["active"],
      borderColor: ["focus-visible", "first"],
      textColor: ["visited"],
    },
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      black: "#121212",
      white: "#faffff",
      gray: {
        50: "#E8E8E8",
        100: "#D1D1D1",
        200: "#A3A3A3",
        300: "#787878",
        400: "#4A4A4A",
        500: "#1C1C1C",
        600: "#171717",
        700: "#121212",
        800: "#0A0A0A",
        900: "#050505",
      },
      blue: colors.blue,
    },
  },
  plugins: [],
};

If i go back to the previous configurations it doesn't change anything. Same as before, the custom colors are not loaded. Did you get into the same issue? Do you have any tip on how to fix that without going back to the previous version?

0

There are 0 best solutions below