Migrating to 0.6.0

The 0.6.0 release of the kit introduces a number of breaking changes. This guide will help you migrate your code to the new version.

NB: If you have cloned the repository after the 0.6.0 release, you can skip this guide.

The changes impact the following areas:

1. Tailwind CSS classes
2. Installed Packages

Tailwind CSS classes

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.

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.6.js":

const replace = require('replace-in-file');
const files = ['app/**/*.tsx', 'app/**/*.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.6.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.

Removed "Headless UI"

We have removed the package headlessui from the kit. It's slowly maintained and we don't use it anymore.

This is a breaking change, as it will impact the way you import the package.

If you have components using headlessui, please keep it in your project. Otherwise, you can remove it.

Conclusion

This guide should help you migrate your project to the new version of the kit. If you have any questions, please get in touch with me.