@kalimahapps/eslint-plugin-tailwind

v1.1.0

Published

6 months ago

Provide eslint rules for tailwindcss

Downloads

1,155

0High
0Medium
0Low

khr2003

tailwindcss eslint eslint-plugin vue vue3

✨ Rules

tailwind-sort: Sort tailwind classes in alphabetical order in groups
tailwind-multiline: Break tailwind classes into multiple lines if they exceed the max line length (default: 80)

💽 Installation

PNPM

pnpm add eslint @kalimahapps/eslint-plugin-tailwind -D

NPM

npm install eslint @kalimahapps/eslint-plugin-tailwind -D

🔧 Usage

Create eslint.config.js file (or eslint.config.mjs for esm, or eslint.config.cjs for commonjs) in the root of your project and add this

import kalimahAppsTailwind from '@kalimahapps/eslint-plugin-tailwind';

export default [
	{
		plugins: {
			kalimahAppsTailwind,
		},
		rules: {
			'kalimahAppsTailwind/sort': 'warn',
			'kalimahAppsTailwind/multiline': 'warn',
		},
	},
]

The following options can be set to the mutiline rule:

maxLen: break classes as soon as the line length is longer than this (and join if the line is smaller)
quotesOnNewLine: put the quotes on different lines to the first and last class

Please note that the indentation of for the classes in multiline rule will follow the indentation of the parent. i.e. spaces will be used if the parent is using spaces and tabs will be used if the parent is using tabs

import kalimahAppsTailwind from '@kalimahapps/eslint-plugin-tailwind';

export default [
	{
		plugins: {
			kalimahAppsTailwind,
		},
		rules: {
			'kalimahAppsTailwind/sort': 'warn',
			'kalimahAppsTailwind/multiline': [
				'warn',
				{
					maxLen: 100,
					quotesOnNewLine: true,
				},
			],
		},
	},
]

VSCode integration

Install ESLint extension in VSCode and add this to your .vscode/settings.json file

{
 	"prettier.enable": false,
  	"editor.formatOnSave": false,
	"eslint.codeAction.showDocumentation": {
		"enable": true
	},
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	"eslint.validate": [
		"javascript",
		"javascriptreact",
		"typescript",
		"typescriptreact",
		"json",
		"jsonc",
		"json5",
		"vue"
	],
}

You need to install ESLint extension in VSCode. You can find it here