[Prettier Plugin] Tailwind V4 + Prettier Plugin Issue with Custom Classes

[mirhamasala]

Hello, ☀️

After upgrading to Tailwind V4 and "prettier-plugin-tailwindcss": "^0.6.11", I’ve noticed that classes are being reordered on save. For example:

flex items-center text-brand-800/50 to text-brand-800/50 flex items-center

This seems to happen with custom theme variables, leading us to suspect that the Prettier plugin isn’t recognizing them.

We have the following line in our .prettierrc.json:

"tailwindStyleSheet": "./src/app/_styles/globals.css"

Here’s our full globals.css file:

@import 'tailwindcss';

@plugin "@tailwindcss/typography";
@plugin "@headlessui/tailwindcss";
@plugin "@tailwindcss/forms";

:root {
  --outline-brand: 2px solid var(--color-brand-100);
  --outline-brand-offset: 0px;
  --outline-brand-border-color: transparent;
}

@theme {
  --color-brand-100: #eff6fc;
  --color-brand-200: #d8ebfb;
  --color-brand-300: #73b4ed;
  --color-brand-400: #0090ff;
  --color-brand-500: #154ed9;
  --color-brand-600: #0621a4;
  --color-brand-700: #06094e;
  --color-brand-800: #08072e;

  --spacing-readable: 60ch;
}

@utility brand-outline {
  outline: var(--outline-brand);
  outline-offset: var(--outline-brand-offset);
  border-color: var(--outline-brand-border-color);
}

@utility prose {
  --tw-prose-body: var(--color-brand-100);
  --tw-prose-headings: var(--color-brand-100);
  --tw-prose-bold: var(--color-brand-100);
  --tw-prose-quotes: var(--color-brand-100);
  --tw-prose-quote-borders: var(--color-brand-300);
  --tw-prose-counters: var(--color-brand-100);
  --tw-prose-bullets: var(--color-brand-100);
  --tw-prose-code: var(--color-brand-100);
  --tw-prose-pre-bg: var(--color-brand-700);
  --tw-prose-pre-code: var(--color-brand-100);
  --tw-prose-captions: var(--color-neutral-400);
  --tw-prose-td-borders: var(--color-brand-300);
  --tw-prose-th-borders: var(--color-brand-300);

  & code {
    &::before,
    &::after {
      @apply content-none!;
    }
  }

  & pre {
    @apply border-brand-600 border border-solid;
  }

  & iframe {
    @apply w-full;

    &[src*='youtube.com'] {
      @apply aspect-video h-auto w-full;
    }
  }

  & figure {
    @apply text-center;
  }

  & figcaption {
    @apply text-left text-sm;
  }

  & table thead th {
    @apply text-brand-300;
  }
}

@layer components {
  .text-link {
     @apply text-brand-300 hover:underline focus:brand-outline;
  }

  .toc-header {
    @apply text-brand-200 text-sm font-semibold uppercase;
  }
}

Could you help us figure out what we might be doing wrong?

Thank you so much. 🙏🏼

[Inventoris]

@mirhamasala hey!

prettier-plugin-tailwindcss formats the order of classes on save, as it should be. The order is used according to the following rules. According to the documentation:

Any custom classes that don't come from Tailwind plugins (like classes for targeting a third-party library) are always sorted to the front, so it's easy to see when an element is using them

If not all your classes are sorted when they should be, you should check the settings according to the guide here.

I hope my answer was helpful!

[mirhamasala]

Thank you @Inventoris.

Any custom classes that don't come from Tailwind plugins (like classes for targeting a third-party library) are always sorted to the front, so it's easy to see when an element is using them

Would this also include custom theme variables? Like bg-brand-100, text-brand-100, etc.? My understanding is that it shouldn't.. (and it wasn't before the upgrade?)

[mirhamasala]

We fixed this – we had a typo: tailwindStyleSheet instead of tailwindStylesheet 😵‍💫🙏🏼