Skip to content

Migrate Prettier and add Prettier Tailwind Plugin

Summary

We want to use the prettier-plugin-tailwindcss Plugin.

We need to migrate our codebase to use Prettier version 3 first to be able to integrate the Plugin. Currently, we're on version 2.

Also, we could update Tailwind CSS from version 3.4.1 to 3.4.4.

These updates will ensure that our code formatting and styles are consistent with the latest standards and features.

Single steps

Migrate Prettier from version 2 to version 3:

  1. Update prettier dependency in package.json to version 3.
  2. Review and update any configuration settings that may have changed or deprecated.
  3. Address any code formatting changes required by the new Prettier version.

Integrate prettier-tailwind-plugin:

  1. Add prettier-tailwind-plugin to the project dependencies.
  2. Configure the plugin in the .prettierrc file or equivalent configuration file.
  3. Ensure that Tailwind CSS classes are automatically sorted according to the recommended order.

Update Tailwind CSS from version 3.4.1 to 3.4.4:

  1. Update the tailwindcss dependency in package.json to version 3.4.4.
  2. Review the Tailwind CSS release notes for any breaking changes or new features between versions 3.4.1 and 3.4.4.
  3. Test the application to ensure that the updated Tailwind version does not break any existing styles or layouts.
Edited by Vanessa Otto