We have updates the Tailwind CSS classes using a new convention named dark, which is used for dark mode. This is a breaking change, as it will impact the way you use the Tailwind CSS classes.

Before, we used to have a black color - but it is no longer available. Instead, we have a dark color, which is used for dark mode. This means that you will need to update your code to use the new dark color.

Additionally, the new color uses a different level of opacity, which is more suitable to the standard Tailwind CSS convention, and is more consistent with the other colors.

By default, the dark color is an alias for colors.gray from the Tailwind CSS palette. You can change it by updating the colors.dark property in the tailwind.config.js file.

For example, you can provide your own palette, or switch to another dark color such as colors.slate.

tailwind.config.js


const colors = require('tailwindcss/colors');
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./app/**/*.{ts,tsx,jsx,js}'],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        serif: ['serif'],
        heading: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
        sans: [
          'system-ui',
          'BlinkMacSystemFont',
          'Inter',
          'Segoe UI',
          'Roboto',
          'Ubuntu',
        ],
        monospace: [`SF Mono`, `ui-monospace`, `Monaco`, 'Monospace'],
      },
      colors: {
        primary: {
          ...colors.indigo,
          contrast: '#fff',
        },
        dark: colors.slate,
      },
    },
  },
};

Automating the migration

To automate the migration, you can use the following script. First, install the package (either globally or locally):


npm i replace-in-file

Then, copy this script into your project named "migrate-0.3.js":


const replace = require('replace-in-file');
const files = ['src/**/*.tsx', 'src/**/*.css'];
 
const promise = () =>
  new Promise((resolve, reject) => {
    replace({
      ...getConfigs(),
      files,
    })
      .then((results) => {
        results.forEach((result) => {
          if (result.hasChanged) {
            console.log('File changed:', result.file);
          }
        });
 
        resolve();
      })
      .catch((error) => {
        console.error('Error occurred:', error);
 
        reject(error);
      });
  });
 
(async () => {
  console.log(`Replacing classes in "${files}" ...`);
  await promise();
  console.log('Done!');
})();
 
function getConfigs() {
  return {
    from: [
      /black-600/g,
      /black-500/g,
      /black-400/g,
      /black-300/g,
      /black-200/g,
      /black-100/g,
      /black-50/g,
      "'classnames'",
    ],
    to: [
      'dark-900',
      'dark-900',
      'dark-800',
      'dark-700',
      'dark-600',
      'dark-500',
      'dark-400',
      "'clsx'",
    ],
  };
}

Then, run the script:


node migrate-0.3.js

This will replace all the classes in your project.

Packages

Replaced "classnames" with "clsx"

Additionally, we replaced the package classNames with a newer, smaller, faster and maintained package named clsx. This is a breaking change, as it will impact the way you import the package.

The command above will also replace the import statement for you. However, if you want to do it manually, rename every instance of 'classnames' with 'clsx' in your project.