The 0.1.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.1.0 release, you can skip this guide.
The changes impact the following areas:
- Tailwind CSS classes
- 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.1.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.1.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.