tailwind specific order

[damianobarbati]

Is there any way to support the tailwind suggested order in css files using stylelint? Ref: https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted

I currently achieve the result in the js/jsx/ts/tsx files using eslint plugin https://www.npmjs.com/package/eslint-plugin-tailwindcss.

[hudochenkov]

Stylelint is not the tool for the job. Linting HTML class attribute (or similar in JSX or other flavors) is not for Stylelint. Stylelint working only with styles.

[damianobarbati]

@hudochenkov I'm talking about css/scss files, not html 😅

For instance, in a css file like the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-family: Lexend, system-ui, sans-serif;
}

.btn-primary {
  @apply font-inter rounded bg-orange-accent px-12 py-4 text-lg font-bold text-white no-underline border-0 cursor-pointer;
}

Is it possible to sort the tailwind classes with the tailwind suggested order?

[hudochenkov]

Are you talking about this part?

@apply font-inter rounded bg-orange-accent px-12 py-4 text-lg font-bold text-white no-underline border-0 cursor-pointer;

If yes, then it is possible to make a stylelint plugin for that. Someone would have to make it such plugin.