Tailwindのクラス名を自動で並び替える

Tailwindのクラス名がバラバラの順番になっているととてもつらいです

<div class="z-50 z-10 container text-left md:text-center justify-center"></div>

prettier-plugin-tailwind で並び替えができます

使い方はリンク先に書いてあるのですが、デフォルトだと並び替えをしてくれないので .prettierrc で並び替えたい順番を指定する必要があります 最新バージョンだとデフォルトで設定されているみたいです

{
  "twPluginsOrder": "container,position,zIndex,inset,display,flex,flexDirection,flexGrow,flexShrink,flexWrap,gap,gridAutoFlow,gridColumn,gridColumnEnd,gridColumnStart,gridRow,gridRowEnd,gridRowStart,gridTemplateColumns,gridTemplateRows,alignContent,alignItems,alignSelf,justifyContent,justifyItems,justifySelf,verticalAlign,placeContent,placeItems,placeSelf,float,clear,order,tableLayout,margin,padding,width,minWidth,maxWidth,height,maxHeight,minHeight,textAlign,textColor,textDecoration,textOpacity,wordBreak,whitespace,fontFamily,fontSize,fontSmoothing,fontStyle,fontVariantNumeric,fontWeight,letterSpacing,lineHeight,backgroundColor,backgroundImage,backgroundSize,backgroundPosition,backgroundRepeat,backgroundAttachment,backgroundClip,backgroundOpacity,borderWidth,borderStyle,borderColor,borderOpacity,borderRadius,borderCollapse,placeholderColor,placeholderOpacity,outline,fill,stroke,strokeWidth,boxShadow,gradientColorStops,opacity,visibility,accessibility,appearance,boxSizing,cursor,pointerEvents,userSelect,divideColor,divideOpacity,divideStyle,divideWidth,listStylePosition,listStyleType,objectFit,objectPosition,overflow,overscrollBehavior,transform,transformOrigin,translate,textTransform,resize,rotate,scale,skew,space,animation,transitionProperty,transitionDuration,transitionDelay,transitionTimingFunction,preflight"
}

上記のように指定すると次のように変換されます

 <div className="container z-10 z-50 justify-center text-left md:text-center"></div>

CSSのプロパティは特に並び順は気にならないんだけど、Tailwindだと並び順がバラバラだとそれだけでわかりにくくなるので並び順は特定のルールにそって自動で並んでほしいと思う

追記

mode を jit にすると動かなくなった。特にエラーがでていないので、何が原因かしばらく悩んだ

https://github.com/Acidic9/prettier-plugin-tailwind/issues/29

上記の Isuue にあるように、tailwind.config.js に以下の設定を加えると動くようになるので一旦これで対応した

module.exports = {
  // NOTE: https://github.com/Acidic9/prettier-plugin-tailwind/issues/29
  mode: process.env.NODE_ENV ? 'jit' : undefined,
};

他の方法

https://github.com/francoismassart/eslint-plugin-tailwindcss

eslint-plugin-tailwindcss でも並び替えが可能です。こちらは jit 対応済み。

tailwindcss-classnames を使っているといずれの場合もソートできない

https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/13

どちらを使っても clsx("text-left bg-red-300") といった形ではソートされますが、 clsx("bg-red-300", "text-left") こういった形ではそもそもソートされないので（引数の順番をかえることになるのでそれはそうかという感じですが……）、tailwindcss-classnamesをつかっているとそもそもソートすることは難しそう