[Tips] Organizing your Tailwind ClassName

This is a good plugin to organize your long-dizzy tailwind classnames.

You have to install Prettier before you get started

 

preview a result

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

---

How to install

1. put this text in the terminal

npm install -D prettier prettier-plugin-tailwindcss

2. Save the codes by using Prettier

 

3. Well done! Happy Hacking!

---

+ How classes are sorted?

They sorted High Level class to Low Level class

 

examples

<!-- `container` is a component so it comes first -->
<div class="container mx-auto px-6">

<div class="pt-2 p-4">
<!-- ⬆️Before After⬇️ -->
<div class="p-4 pt-2">

<div class="text-gray-700 shadow-md p-3 border-gray-300 ml-4 h-24 flex border-2">
<!-- ⬆️Before After⬇️ -->
<div class="ml-4 flex h-24 border-2 border-gray-300 p-3 text-gray-700 shadow-md">

<div class="hover:opacity-75 opacity-50 hover:scale-150 scale-125">
<!-- ⬆️Before After⬇️ -->
<div class="scale-125 opacity-50 hover:scale-150 hover:opacity-75">

<div class="lg:grid-cols-4 grid sm:grid-cols-3 grid-cols-2">
<!-- ⬆️Before After⬇️ -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">

<div class="p-3 shadow-xl select2-dropdown">
<!-- ⬆️Before After⬇️ -->
<div class="select2-dropdown p-3 shadow-xl">

---

End

 

 

References

https://tailwindcss.com/docs/reusing-styles

Reusing Styles - Tailwind CSS