はじめに
こんにちは。
こちらの記事では、TailwindCSSのクラスを自動整形を行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。
なぜ自動整形する必要があるのか
Tailwindcssでは、classに直接スタイルの記述を行えますが、ルールを決めないとクラスの順番に一貫性がなくなり、見づらくなってチーム開発でも弊害が発生してしまうかと思います。
そのため、こちらの記事ではPrettier Plugin Tailwindを使用して、クラスの自動整形を行う方法を紹介いたします。
実装手順
今回は、下記のdivタグのクラスを整形していきます。
template
<div class="px-4 py-20 md:py-40 items-center mx-auto md:flex container"></div>
1. Prettier Plugin Tailwindのインストール
yarnでインストールする場合は、GitHubのとおり下記のコマンドで実行。
yarn add --dev prettier prettier-plugin-tailwind
npmの場合は、下記のコマンドで実行する。
npm install --save-dev prettier prettier-plugin-tailwind
yarnのコマンドをnpmに変換したいときは、こちらの早見表が参考になるかと思います。
インストールが完了したら、package.jsonのdevDependenciesに追加されていることを確認します。
※ dependenciesは、本番環境で使われるパッケージ（ nuxtやaxiosなど ）
※ devDependenciesは、開発時のみ使われるパッケージ（ PrettierやJestなど ）
2. Prettier Plugin Tailwindを実行する
クラスを整形したいファイルを保存することで、処理がはしります。先ほどのdivタグを自動整形すると以下のようになります。
template
<div class="container items-center mx-auto px-4 py-20 md:flex md:py-40"></div>
Githubにも記載がありますが、デフォルトの並び替えは以下のようになっているようです。
{
"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"
}
おわりに
ここまでTailwindCSSのクラスを自動整形を行う方法についてまとめました。
今後もアウトプットしながら学習を進めていきたいと思います！
以上、最後まで読んでいただきありがとうございました！