It's time to fix the Tailwind CSS deprecated colors warning when using tailwindcss/colors

[Christian-Garrison]

warn - As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`.
warn - Update your configuration file to silence this warning.

warn - As of Tailwind CSS v3.0, `warmGray` has been renamed to `stone`.
warn - Update your configuration file to silence this warning.

warn - As of Tailwind CSS v3.0, `trueGray` has been renamed to `neutral`.
warn - Update your configuration file to silence this warning.

warn - As of Tailwind CSS v3.0, `coolGray` has been renamed to `gray`.
warn - Update your configuration file to silence this warning.

warn - As of Tailwind CSS v3.0, `blueGray` has been renamed to `slate`.
warn - Update your configuration file to silence this warning.

Simply using tailwindcss/colors seems to cause this error even when not directly using any deprecated color in the tailwind config (i.e. lightBlue, warmGray, trueGray, coolGray, blueGray).

import tailwindcolors from 'tailwindcss/colors';

export const colors = {
  ...tailwindcolors,
  gray: {
    50: '#fafafa',
    100: '#e6e8e7',
    200: '#d9dbdb',
    300: '#b3b8b7',
    400: '#9a9f9e',
    500: '#808785',
    600: '#676f6e',
    700: '#4e5856',
    800: '#343f3d',
    900: '#1b2826',
    950: '#020f0d',
  },
  teal: {
    50: '#d9f2ef',
    100: '#b8e6e1',
    200: '#a0ddd7',
    300: '#70cdc2',
    400: '#41bcae',
    500: '#11ab9a',
    600: '#0d8679',
    700: '#0a675c',
    800: '#07443e',
    900: '#03221f',
    950: '#020f0d',
  },
};

import { type Config } from 'tailwindcss';
import { tokens } from './src/tokens';

const config = {
  darkMode: ['class'],
  content: ['./src/**/*.{js,jsx,mdx,ts,tsx}'],
  prefix: '',
  theme: {
    extend: {
      colors: {
        primary: tokens.colors.teal,
        gray: tokens.colors.gray,
      },
    },
  },
  // ...
} satisfies Config;

export default config;

When stating warn - Update your configuration file to silence this warning. is there a way to fix this, if so it isn't blatantly documented in the official docs?

At the least, there should be an option in the config to silence these warnings completely without needing to actually apply any changes, basically an option to forcefully say "We understand and don't want these logs even if it is an actual issue so we can just get rid of them." suppressDeprecationWarnings

Additionally I'm confused why something deprecated is included just to log these warnings to users, why not include an auto migration warning to those upgrading versions "this seems to be the typical standard in upgrading these days, right?"? Also why not give additional options within tailwindcss/colors to import the deprecated colors directly for those that need the backwards compatibility bandaid instead of "punishing" users on the latest versions.

import {  deprecatedColors } from 'tailwindcss/colors';

These suggested fixes reward the new & latest version users the ability to use the default colors from tailwindcss/colors freely without being warning punched, since these users are less likely to even know those deprecated colors exist.

[cybercoder-naj]

Any further developments on this topic?

[Farnsi]

Please update!

[SanderCokart]

I recently updated my packages and get these messages filling up my console which is super annoying.

runtime-base.ts:467   Error Component Stack
    at Lazy (<anonymous>)

As of Tailwind CSS v3.0, `blueGray` has been renamed to `slate`. Error Component Stack

are just examples

This is due to these lines which I guess were added recently because I've never had these pop up in my console before:

colors.d.ts

 /** @deprecated As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`. Update your configuration file to silence this warning. */ lightBlue: DefaultColors['sky']
  /** @deprecated As of Tailwind CSS v3.0, `warmGray` has been renamed to `stone`. Update your configuration file to silence this warning. */ warmGray: DefaultColors['stone']
  /** @deprecated As of Tailwind CSS v3.0, `trueGray` has been renamed to `neutral`. Update your configuration file to silence this warning. */ trueGray: DefaultColors['neutral']
  /** @deprecated As of Tailwind CSS v3.0, `coolGray` has been renamed to `gray`. Update your configuration file to silence this warning. */ coolGray: DefaultColors['gray']
  /** @deprecated As of Tailwind CSS v3.0, `blueGray` has been renamed to `slate`. Update your configuration file to silence this warning. */ blueGray: DefaultColors['slate']

I am not even using tailwind/colors.

I am in a monorepo with a UI package that has a tailwind preset that is used in presets, but neither contain tailwindcss/colors as a package.

[totallytotallyamazing]

Found the answer here
Just add the 5 lines from [BELOW], beginning with "delete" to your tailwind.config.js:

const colors = require('tailwindcss/colors')
// removing old colors
delete colors.lightBlue;
delete colors.warmGray;
delete colors.trueGray;
delete colors.coolGray;
delete colors.blueGray;
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", 
    "./screens/**/*.{js,jsx,ts,tsx}",  
    "./components/**/*.{js,jsx,ts,tsx}", 
    "./src/**/*.{html,js}",
    "./app/**/*.{js,tsx,ts,jsx}",
    "./node_modules/.cache/**/*.{js,tsx,ts,jsx}"],
  theme: {
    extend: {},
    colors: {
      ...colors,
      'cust-blue': '#2782fb',
      'cust-dk-blue': '#0155c1',
      'cust-lt-blue': '#80cffe',
      'cust-lt2-blue': '#8fd4fc',
    },
  },
  plugins: [],
}

[lzhou-aops]

The above solution didn't work for us, maybe because the error was being triggered from inside the tailwindcss/typography plugin, which imports tailwindcss/colors.

We were able to fix it by deleting lines 315-354 of node_modules/tailwindcss/lib/public/colors.js, and using the patch-package utility to keep the changes around.