Prettier Plugin Tailwind

Sort tailwind classes with Prettier.

Supports

• HTML
• CSS (@apply directive)
• JSX, TSX
• twin.marco
• Svelte

Go from this:

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

To this:

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

This plugin reads your tailwind.config.js file to support new keys and classes generated by Tailwind.

Installation VSCode:

Install Prettier and the plugin into your project locally:

yarn add --dev prettier prettier-plugin-tailwind

*supports other IDE's*

Note: Prettier 2.0.0 or greater is required as a peer dependency.

Options

These options can be added to your .prettierrc file.

twConfig

Path to tailwind config relative to the root of the project.

twConfig: string

Default: "./tailwind.config.js"

twPluginsOrder

Comma separated order of tailwind plugins to sort classes by. "" will use the plugins in alphabetical order.

twPluginsOrder: string

Default: "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"

Example: "container,position,inset"

---

twClassesPosition

Position of component and utility classes. "as-is" will allow component classes to be placed between utility classes.

twClassesPosition: 'components-first' | 'components-last' | 'as-is'

Default: "components-first"

---

twUnknownClassesPosition

Position of unknown classes.

twUnknownClassesPosition: 'start' | 'end'

Default: "start"

---

twJsxClassAttributes

Comma separated list of JSX attributes to sort tailwind classes in.

twJsxClassAttributes: string

Default: "class,className,tw"

Svelte Setup

To use this plugin with Svelte, you should not use the prettier-plugin-svelte plugin as it is imported by this plugin already.

Credit goes to the svelte prettier plugin for helping with support for Svelte.

https://github.com/sveltejs/prettier-plugin-svelte

Roadmap

• Add support for configuring plugin order
• Add support for JSX, TSX
• Add support for Svelte

Contributing

Testing

Rename test-tailwind.config.js to tailwind.config.js and run node ./test.js.