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 .

Basics

Let's take a look at it.

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.

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>

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>

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>

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>

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>

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>

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>

8. Filters

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

<div className="backdrop-blur-lg">
   <h1>Filters</h1>
</div>

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