Increase tailwind classes readability with this eslint plugin
Tags: tailwindcss, eslint, javascript, webdev
Published: 2023-03-05 15:58:56

Tailwind is a popular utility-first CSS framework that has gained significant traction in recent years. It is a highly customizable and easy-to-use framework that can help developers streamline their workflow and create visually appealing websites with less code. 

One of the biggest advantages of using Tailwind is that it streamlines the development process. The framework provides a set of pre-defined classes that developers can use to style their HTML elements. This eliminates the need to write custom CSS for every single element on the website, saving a significant amount of time and effort.

With such large amounts of pre-defined classes, sometimes it can be difficult to read and understand at first glance how a particular element is styled. 

Let's look at this example (taken from flowbite):
```html
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" value="" class="sr-only peer">
  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>
```

This is a checkbox that has been styled using Tailwind. It is a single line of code that contains a lot of information. It is not immediately clear how the checkbox is styled.

This is why I developed an eslint plugin that helps developers to better understand how Tailwind classes are being used in their code. The plugin is called [@kalimahapps/eslint-plugin-tailwind](https://www.npmjs.com/package/@kalimahapps/eslint-plugin-tailwind) and it is available on npm. Currently, it has two rules.

## tailwind-multiline
With this rule, you can enforce that Tailwind classes are written on multiple lines once they exceed a certain number of characters. This makes it easier to read and understand how the element is styled.

Let's see how the above example would look like with this rule enabled:
```html
<label class="relative inline-flex items-center cursor-pointer">
	<input type="checkbox" value="" class="sr-only peer">

	<div
		class="w-11
			h-6
			bg-gray-200
			peer-focus:outline-none
			peer-focus:ring-4
			peer-focus:ring-blue-300
			dark:peer-focus:ring-blue-800
			rounded-full
			peer
			dark:bg-gray-700
			peer-checked:after:translate-x-full
			peer-checked:after:border-white
			after:content-['']
			after:absolute
			after:top-[2px]
			after:left-[2px]
			after:bg-white
			after:border-gray-300
			after:border
			after:rounded-full
			after:h-5
			after:w-5
			after:transition-all
			dark:border-gray-600
			peer-checked:bg-blue-600"
	/>

	<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>
```

As you can see, the classes are now written on multiple lines and from first glance you can identify which classes are being used to style the element.

## tailwind-sort
This is the other rule that is included in the plugin. It helps developers to sort the Tailwind classes in a consistent manner. While tailwind provides a [prettier plugin](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) to sort the classes, I found it unintuitive and not very useful. The classes in the base layer will be sorted first, followed by the classes in the components layer, and finally the classes in the utilities layer.

This rule, however, sorts classes alphabetically but in groups. For example, it makes sense that `bg-sky-500` and `dark:bg-sky-100` are grouped together. This is because they are both background colors. The same goes for `text-sky-500` and `dark:text-sky-100`.

Let's see how the above example would look like with this rule enabled:
```html
<label class="cursor-pointer inline-flex items-center relative">
	<input type="checkbox" value="" class="peer sr-only">

	<div
		class="bg-gray-200
			after:bg-white
			dark:bg-gray-700
			h-6
			after:h-5
			peer
			dark:peer-focus:ring-blue-800
			peer-checked:after:border-white
			peer-checked:after:translate-x-full
			peer-checked:bg-blue-600
			peer-focus:outline-none
			peer-focus:ring-4
			peer-focus:ring-blue-300
			rounded-full
			after:rounded-full
			w-11
			after:w-5
			after:absolute
			after:border
			after:border-gray-300
			after:content-['']
			after:left-[2px]
			after:top-[2px]
			after:transition-all
			dark:border-gray-600"
	/>

	<span class="font-medium ml-3 text-gray-900 dark:text-gray-300 text-sm">Toggle me</span>
</label>
```

I think this is a much more readable and understandable way to write Tailwind classes.

## Install and Usage
Currently, the package only works for vue projects. To install and use this plugin in your project checkout readme file:

{%embed https://github.com/kalimahapps/eslint-plugin-tailwind %}

👥 **Connect**
Twitter: [@kalimahapps](https://twitter.com/kalimahapps)