[Prettier Plugin] Tailwind string variables sorting

[ChiuMungZitAlexander]

I know Prettier Plugin will sort tw classnames in jsx elements.

But if I have a classname string:

export const viewWrapper =
  'font-apercu relative flex min-h-screen flex-col items-center px-6 pt-[40px] pb-[90px] text-center md:mx-auto md:w-11/12 md:max-w-[1400px]  md:px-0 md:pt-[40px]';

it will ignore sort.

I am not sure if it is a good practice to sort the string like above.

[alex-krasikau]

Hey @ChiuMungZitAlexander!

The Tailwind Prettier plugin needs hints to recognize Tailwind CSS classes for formatting. It automatically parses common class declaration attributes like class, className, :class, [ngClass], and others.

To help Prettier recognize the string, you can use Template Literals. Refer to the documentation for setting up your environment correctly: Sorting classes in template literals.

// prettier.config.js
module.exports = {
  tailwindFunctions: ['tw'],
}

// in your code
const tw = (strings, ...values) => String.raw({ raw: strings }, ...values)

const mySortedClasses = tw`bg-white p-4 dark:bg-black`