DEV Community

Cover image for tailwindCSS's classes order pattern "best practice" πŸƒ
vito.mohagheghian
vito.mohagheghian

Posted on • Updated on

tailwindCSS's classes order pattern "best practice" πŸƒ

Using patterns πŸ“Š in your codes is always a pretty great thingπŸ‘ because your code looks much better πŸ‘€, in the future, you won't be confuse 🧠, and other developers πŸ§‘β€πŸ’» that contribute to your project will understand it better, especially in open source projects πŸ“–.

Some patterns are confusing 🧠, and hard to remember 😑 since one of the goals of the tailwindCSS is not to be complicated 🦾, I try a lot to make as much as easy, and easy to customize πŸ–ŒοΈ.

I also made a GitHub repository for you guys to be able to contribute and make it better. πŸ˜‰

Basics

Let's take a look at it.

Image description

You may say what is special about this piece of code πŸ€”πŸ’­, the answer is that during coding we have no pattern and methodology we just type class names that we thinking of, and this will make our code dirty πŸ’©.

Logic

the logic behind orders and patterns is we go from outside to inside πŸ“₯. It means first we define positions, after that margin, padding, outline, and border, and then we define element inner styles like display, align-items, background-color, text-color, font properties, etc. 🚌 Next we define class names like transitions, animations, and external CSS classes.

Responsive

Some developers prefer to use media queries at the end of the string which is not perfect πŸ”” because it's easier to have all media queries of one element in one look πŸ‘οΈ. like below.

Image description


Orders

The most important thing in this pattern is orders but how do we categorize them in groups, and what are the categories? πŸ‘†


1. position, inset, top, bottom...

Including position, inset, top, left, bottom, and right.

1️⃣ position => absolute, relative, static...
2️⃣ inset => inset-2, inset-4...
3️⃣ top => top-6, top-10...
4️⃣ right => right-6, right-10...
5️⃣ bottom => bottom-6, bottom-10...
6️⃣ left => left-6, left-10...

<div className="absolute top-10 right-10">
   <h1>Position</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

2. Margin, Padding, outline, and border

the Order of the directions are clockwise πŸ”ƒ, like: mt-0 => mr-0 => mb-0 => ml-0

1️⃣ Margin
2️⃣ Padding
3️⃣ Outline
4️⃣ Border

<div className="my-10 p-24 outline-none border-2">
   <h1>Margin, Padding, Outline, and Border</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

3. Height, width, min and max-width, and min and max-height

1️⃣ width => w-10
2️⃣ height => h-10
3️⃣ min-width => h-5
4️⃣ min-height => h-5
5️⃣ max-width => h-16
6️⃣ max-height => h-16

<div className="w-10 h-4 min-h-2 max-w-36 max-h-10">
   <h1>Width, Height, min-..., and max-...</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

4. Display (grid or flexbox items in addition)

The order in this category does not matter 🫠, because it may be different. πŸ›«

<div className="flex items-center justify-content flex-col">
   <h1>Flex, and Grid</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

5. Background-color, and box-shadow

1️⃣ background color
2️⃣ box shadow
3️⃣ drop-shadow

<div className="bg-red-900 shadow-xl drop-shadow-lg">
   <h1>background-color, and box-shadow, and drop-shadow</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

6. Text, and font

First, we define text color, then text font-size, and last but not least font-weight.

1️⃣ color => text-red-600, text-white...
2️⃣ font-size => text-lg, text-3xl...
3️⃣ font-height => leading-9, leading-5...
4️⃣ font-weight => font-semibold, font-medium...

<div className="text-red-600 text-sm leading-4 font-semibold">
   <h1>Color, font-size, font-height, and font-weight</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

these most common classes, so for more classes you can add them at the end of the category.


7. Transitions, and animations

1️⃣ transition => transition-all duration-750...
2️⃣ animation => animate-spin

<div className="transition-all duration-1000 animation-ping">
   <h1>Transition, and Animation</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

8. Filters

Due to a large number of cases, it's not great.

<div className="backdrop-blur-lg">
   <h1>Filters</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

Conclusion

I developing a react project with this method, and after finishing it I will share the link here. So be sure to save it πŸ˜‰πŸ˜ˆ.

back to top

keep in touch

Keep Coding Y'All πŸ‘¨πŸ»β€πŸ’»

Top comments (6)

Collapse
 
maciejadamski89 profile image
Maciej Adamski

Just use 'Headwind" - a VSCode extension ;)

Collapse
 
vitomohagheghian profile image
vito.mohagheghian

Good tip!

Collapse
 
xanwtf profile image
Xan • Edited

I’ve always followed β€œthe order of f$?kery” even back without Tailwind. Just so happens that’s what the Headwind extension uses too. Order your CSS files in the amount of β€œf@&kery” they can cause. Position, display, flex, width, height, border, font size, background, color. Everything higher up the chain is likely to cause the most issues.

Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up πŸ‘

Collapse
 
manuartero profile image
Manuel Artero Anguita 🟨

I thought I use emojis heavely ... till I read your post πŸ˜…

Good post by the way :)

Collapse
 
vitomohagheghian profile image
vito.mohagheghian

Yeah, because I found it boring, so added many more emojis