https://github.com/mohammad-mghn/tailwindcss-classes-pattern
A pattern for tailwindCSS classes order
https://github.com/mohammad-mghn/tailwindcss-classes-pattern
best-practice pattern tailwindcss
Last synced: 5 months ago
JSON representation
A pattern for tailwindCSS classes order
- Host: GitHub
- URL: https://github.com/mohammad-mghn/tailwindcss-classes-pattern
- Owner: mohammad-mghn
- License: mit
- Created: 2023-02-06T12:52:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-06T19:50:40.000Z (over 2 years ago)
- Last Synced: 2025-03-31T12:57:27.686Z (6 months ago)
- Topics: best-practice, pattern, tailwindcss
- Homepage: https://dev.to/vitomohagheghian/tailwindcsss-classes-order-pattern-best-practice-1g1
- Size: 9.77 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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...
```jsx
Position
```
-----
## 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
```jsx
Margin, Padding, Outline, and Border
```
-----
## 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
```jsx
Width, Height, min-..., and max-...
```
-----
## 4. Display (grid or flexbox items in addition)
The order in this category does not matter 🫠, because it may be different. 🛫
```jsx
Flex, and Grid
```
-----
## 5. Background-color, and box-shadow
1️⃣ background color
2️⃣ box shadow
3️⃣ drop-shadow
```jsx
background-color, and box-shadow, and drop-shadow
```
------
## 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...
```jsx
Color, font-size, font-height, and font-weight
```
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
```jsx
Transition, and Animation
```
-----
## 8. Filters
Due to a large number of cases, it's not great.
```jsx
Filters
```
------
# 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](#basics)
[keep in touch](https://vito.vercel.app)
Keep Coding Y'All 👨🏻💻