This repo is a reproduction of a bug in prettier-plugin-tailwindcss, where @ianvs/prettier-plugin-sort-imports is not supported despite using the correct plugin ordering.
- Install Node.js and Yarn 1.x
- Install dependencies with
yarn install - Change the ordering of Tailwind classes in
src/main.jsx- for example, movingunderlinebeforefont-bold - Run
yarn formatand verify that the previous ordering is restored - Change the ordering of imports - for example, importing
react-dombeforereact - Run
yarn formatand verify that the import order is (incorrectly) not restored - Remove
prettier-plugin-tailwindcssfrom the plugins array inprettier.config.cjs - Repeat steps 5-6, verifying that import order is now correctly restored
- Replace
prettier.config.jswith a new.prettierrcfile with the following contents:
{
"plugins": [
"@ianvs/prettier-plugin-sort-imports",
"prettier-plugin-tailwindcss"
],
"pluginSearchDirs": false,
"singleQuote": true
}- Repeat steps 5-6, verifying that import order is now correctly restored