eslint-plugin-tailwind-classname-order

This eslint plugin automatically orders the tailwind classes included in the className tags from each element by the provided default order list.

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

Features

• Order tailwind classes by given config
• Recognize predefined classes
• Recognize negative valued class names
• Recognize states like hover,active,peer etc.
• Recognize stacked states properly.
• Recognize mediaquerys
• Support for tailwind-rn
• Supporting not only strings, but also expressions

Roadmap

1. Remove the 'img' slug restriction for bg-images and be more flexible with custom defined values in general, by reading the projects tailwind.config.js.
2. Include className objects that are not string typed instead of just ignoring them.
3. Make custom ordering for the user more accessible and easier.

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

It's mentionable that in the current version it's necessary, that when setting an image as background, which is predefined in the tailwind config, that the name of the image needs to include 'img' in its name, so that the plugin is able to identity it as such.

# will be detected as bg-img element
bg-MY-img-BACKGROUND

# won't be detected as bg-img and instead be treated as bg-color
bg-MY-BACKGROUND

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:

1. 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.
2. 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 from-{color}
• gradient color middle-{color}
• gradient color to-{color}
• 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

# via npm
npm install eslint --save-dev

# via yarn
yarn add -D eslint

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

# via npm
npm install @aacn.eu/eslint-plugin-tailwind-classname-order --save-dev

# via yarn
yarn add -D @aacn.eu/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.eu/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.eu/tailwind-classname-order/order": 2
    }
}