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):
<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 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:
<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 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:
<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: