@aacn_org/eslint-plugin-tailwind-classname-order

eslint-plugin-tailwind-classname-order

Sort tailwind classes for each element className list by a given order-config.

• 1. Features
• 2. Currently supported tailwind classes
• 3. Explicitly unsupported classes
• 4. Default order config
• 5. Installation
• 6. Usage

Features

• Order class names by config
• Recognize predefined classes
• Recognize negative valued class names
• Recognize states like hover,active,peer etc.
• Recognize stacked states properly.
• Recognize mediaquerys
• Remove 'img' slug restriction for bg-images, by reading tailwind-config file
• Handle className objects that are not string typed

Currently supported tailwind classes

For the latest version the following tailwind classes are supported by the order plugin. Classes that are not yet included, will be treated as predefined custom classes. Classes are categorized as seen in the tailwind documentation here

Explicitly unsupported classes

Some classes in tailwind have counterparts with the same name and since interpreting arbitrary values is not supported on the current version, they won't be detected properly. There are two major differences:

• The plugin doesn't support arbitrary values in any way for the certain class. Even when they're predefined in the tw config file, they won't be interpreted properly.
• The plugin can't interpret arbitrary values when they're added inline, but the plugin will be able to detect the proper class, when the value is predefined in the config.
  This Problem will presumably be fixed with a future version.

• Font Family (inline)
• Text Color (inline)
• Text Decoration Color (inline)
• Background Size (arbitrary generally)
• Background Position (arbitrary generally)
• Stroke Color (inline)
• Border Color (inline)
• Outline Color (inline)
• Ring Color (inline)
• Ring Offset Color (inline)
• Box Shadow Color (inline)

Default order config

• predefined class

#browser behavior

• box-sizing

#object reference - High priority because it refers to neighboring content

• peer
• group

#object identity, positioning (where)

• position
• (position) top, right, bottom, left
• visibility
• z-index

#object identity, sizing (how)

• (flex) flex width
• (flex) basis
• container
• width
• width-min
• width-max
• height
• height-min
• height-max
• aspect-ratio

#object identity, core identity (what)

• display

#flex identity, core flex identity (what flex)

• (flex) direction (row/col)
• (flex) wrap

#grid identity, core grid identity (what grid)

• (grid) grid-cols (grid-template-columns)
• (grid) grid-column
• (grid) grid-rows (grid-template-rows)
• (grid) grid-row
• (grid) grid-flow
• (grid) auto-cols
• (grid) auto-rows
• (grid) justify items
• (grid) justify self
• (grid) align content

#flex/grid identity, core flex/grid identity (what flex/grid)

• (flex / grid) justify-content
• (flex / grid) align-items
• (flex / grid) align self
• (flex / grid) gap (x, y)

#object identity, environmental behaviour

• place items
• place content
• place self
• padding-x
• padding-y
• padding (top, right, bottom, left)
• margin-x
• margin-y
• margin (top, right, bottom, left)
• space between (x, y)
• float
• clear
• isolation

#object identity modification

• transform (x, y, rotate, scale, skew)
• transform origin

#content behaviour

• object fit
• object position
• overflow
• overscroll
• order
• break-before
• break-after
• break-inside
• box decoration break

#styling - content / text related

• whitespace

#text styling

• font-family
• font-size
• font smoothing
• font-weight
• font-style
• font-variant-numeric
• tracking (letter spacing)
• leading (line-height)
• list style type
• list style position
• text alignment
• text-color
• text-transform
• text-overflow
• text-decoration
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-underline-offset
• text-indent
• word break
• vertical align
• pseudo-class content

#body behaviour

• opacity

#body styling

• background (url, repeat, pos, size)
• background-attachment
• background-clip
• background-color
• background-origin
• gradient color stops
• mix-blend-mode
• background blend mode
• (svg) fill
• (svg) stroke color
• (svg) stroke width
• border (style, width, radius)
• border-color
• divide (x, y)
• divide color
• divide-style
• outline-width
• outline-style
• outline-offset
• ring width
• ring color
• ring offset width
• ring offset color
• box-shadow
• box-shadow-color

#table styling

• border-collapse
• border-spacing
• table-layout

#filters

• blur
• brightness
• contrast
• drop-shadow
• grayscale
• hue-rotate
• invert
• saturate
• sepia
• backdrop blur
• backdrop brightness
• backdrop contrast
• backdrop grayscale
• backdrop hue rotate
• backdrop invert
• backdrop opacity
• backdrop saturate
• backdrop sepia

#transitions & animation

• transition (property, duration, timing function, delay)
• animate

#interactivity

• accent-color
• appearance
• cursor
• caret-color
• pointer events
• resize
• scroll behavior
• scroll padding (x, y)
• scroll margin (x, y)
• scroll snap align
• scroll snap stop
• scroll snap type
• touch action
• user select
• will-change

#accesiblility

• screen readers

#state management

States are priority wise in the same order as they are presented on the tailwind docs (states), excluding the @media type prefixes.

#media queries

This plugin supports the default breakpoint prefixes as listed on the tailwind docs for responsive design.
Furthermore more custom prefixes are also already added. The orderConfig.json file can of course be altered to include even more custom breakpoint prefixes.

• xs
• sm
• md
• 2md
• lg
• 2lg
• xl
• 2xl
• 3xl

Installation

You'll first need to install ESLint:

With npm

npm install eslint --save-dev

Next, install eslint-plugin-tailwind-classname-order:

npm install @aacn_org/eslint-plugin-tailwind-classname-order --save-dev

With yarn

yarn add -D eslint

Next, install eslint-plugin-tailwind-classname-order:

yarn add -D @aacn_org/eslint-plugin-tailwind-classname-order

Usage

Add tailwind-classname-order to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "@aacn_org/tailwind-classname-order"
    ]
}

Then configure the rules you want to use under the rules section.
This includes the path to the rule file and its severity
More about eslints severity can be found here

{
    "rules": {
        "@aacn_org/tailwind-classname-order/order": 2
    }
}