@aacn_org/eslint-plugin-tailwind-classname-order
Advanced tools
Automatically order tailwind classes included in the className tags from each element by the provided default order list.
This package got renamed
This package can now be found here und its new name @aacn.eu/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.
tailwind.config.js.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
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:
States are priority wise in the same order as they are presented on the tailwind docs (states), excluding the @media type prefixes.
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.
You'll first need to install ESLint:
# 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_org/eslint-plugin-tailwind-classname-order --save-dev
# via yarn
yarn add -D @aacn_org/eslint-plugin-tailwind-classname-order
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
}
}
FAQs
Automatically order tailwind classes included in the className tags from each element by the provided default order list.
The npm package @aacn_org/eslint-plugin-tailwind-classname-order receives a total of 0 weekly downloads. As such, @aacn_org/eslint-plugin-tailwind-classname-order popularity was classified as not popular.
We found that @aacn_org/eslint-plugin-tailwind-classname-order demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.