Suhel, my fellow warrior of the web, you're diving into the land of Tailwind CSS, the utility-first kingdom

where the class names look like ancient incantations, but they work like magic. Here's your holy scroll — the
most used Tailwind CSS classes (battle-tested in real projects ):

Layout & Display

Purpose Class

Flexbox flex, flex-col, flex-row, items-center, justify-center, gap-x-4, gap-y-2

Grid grid, grid-cols-2, grid-cols-3, gap-4

Width/Height
w-full, h-screen, w-1/2, max-w-md

Padding/Margin
p-4, px-6, py-2, m-2, mt-4, mb-6, space-y-4

Container container, mx-auto, px-4

Typography

Purpose Class

Font size text-sm, text-base, text-lg, text-xl, text-2xl

Font weight
font-light, font-normal, font-semibold, font-bold

Text alignment
text-left, text-center, text-right

Color text-gray-500, text-white, text-black, text-blue-600

Line heightleading-snug, leading-relaxed

Background & Borders

Purpose Class

Background color
bg-white, bg-gray-100, bg-blue-500, bg-gradient-to-r

Border border, border-gray-300, rounded, rounded-lg, rounded-full

Shadow shadow, shadow-md, shadow-lg, drop-shadow

Purpose Class

Ring (focus) focus:ring-2, ring-blue-500

Buttons & Interactions

Purpose
Class

Hover hover:bg-blue-600, hover:text-white

Focus focus:outline-none, focus:ring-2

Activeactive:scale-95, active:bg-blue-700

Transitions
transition, duration-300, ease-in-out, transform

Cursorcursor-pointer

Utility & Responsive

Purpose Class

Responsivesm:, md:, lg:, xl:, 2xl:

Hidden/Visible
hidden, block, inline, flex

Overflow overflow-hidden, overflow-scroll

Z-index z-10, z-50

Pro Tip: Combine classes like a Tailwind wizard

<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300">

Click me

</button>

Alright Suhel, back to the raw CSS battlefield — where there’s no utility-first armor, and you’ve gotta fight
with your bare hands (and some curly braces).
Here’s a hit list of the most used raw CSS properties, sorted by category like a seasoned dev’s toolkit. These
are the bread, butter, and caffeine of any UI project:

Box Model (Layout Essentials)

margin /* margin: 0 auto; */

padding /* padding: 1rem; */

border /* border: 1px solid #ccc; */

width /* width: 100%; */

height /* height: 100vh; */

box-sizing /* box-sizing: border-box; */

Flexbox & Grid

display /* display: flex; or display: grid; */

flex-direction /* flex-direction: row | column; */

justify-content /* justify-content: center; */

align-items /* align-items: center; */

gap /* gap: 1rem; */

grid-template-columns /* grid-template-columns: repeat(3, 1fr); */

Typography

font-size /* font-size: 16px; */

font-weight /* font-weight: bold; */

color /* color: #333; */

text-align /* text-align: center; */

line-height /* line-height: 1.5; */

font-family /* font-family: 'Roboto', sans-serif; */

 Backgrounds & Borders

background-color /* background-color: #f9f9f9; */

background-image /* background-image: url('bg.png'); */

border-radius /* border-radius: 8px; */

box-shadow /* box-shadow: 0 4px 6px rgba(0,0,0,0.1); */

Positioning

position /* position: absolute | relative | fixed | sticky; */

top, right, bottom, left /* top: 0; left: 50%; */

z-index /* z-index: 999; */

transform /* transform: translateX(-50%); */

Transitions & Animations

transition /* transition: all 0.3s ease-in-out; */

animation /* animation: fadeIn 1s ease-in; */

@keyframes /* @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } */

Miscellaneous Utilities

cursor /* cursor: pointer; */

overflow /* overflow: hidden | auto | scroll; */

opacity /* opacity: 0.8; */

visibility /* visibility: hidden | visible; */

pointer-events/* pointer-events: none; */

Example in Action

.button {

background-color: #1d4ed8;
 color: white;

padding: 0.5rem 1rem;

border-radius: 8px;

border: none;

cursor: pointer;

transition: background-color 0.3s ease;

.button:hover {

background-color: #2563eb;

Bonus Tip: Want to master CSS fast?

• Practice converting Tailwind classes to raw CSS manually.

• Build the same component in vanilla CSS and Tailwind.

• Use CSS Variables for themes and media queries for responsiveness.

Let’s gooo, Suhel! You’re leveling up to the responsive CSS dojo, where your layout bends and stretches like a
ninja — across screens, devices, and beyond .

Here's your media query cheat sheet — the most used breakpoints with examples. Clean, simple, and ready
to slap into your stylesheet.

1. Basic Media Query Syntax

@media (max-width: 768px) {

/* Styles for screens smaller than 768px */

body {

background-color: lightblue;
 }

2. Common Breakpoints (Mobile First Approach)

Device BreakpointMedia Query

Extra small (phones) 0 – 480px @media (max-width: 480px)

Small (phones to tablets)

481 – 768px
@media (max-width: 768px)

Medium (tablets) 769 – 1024px

@media (max-width: 1024px)

Large (desktops) 1025 – 1280px

@media (max-width: 1280px)

Extra large (large desktops)

1281px and
@media
up (min-width: 1281px)

3. Mobile-First Example

/* Default for mobile */

.container {

padding: 1rem;

font-size: 14px;

/* Tablet and up */

@media (min-width: 768px) {

.container {

padding: 2rem;

font-size: 16px;

}
/* Desktop and up */

@media (min-width: 1024px) {

.container {

padding: 3rem;

font-size: 18px;

4. Flex Direction Change Example

.flex-wrapper {

display: flex;

flex-direction: column;

@media (min-width: 768px) {

.flex-wrapper {

flex-direction: row;

5. Hide Element on Small Screens

.hide-on-mobile {

display: none;

@media (min-width: 768px) {

.hide-on-mobile {
 display: block;

Pro Tip: Combine With Variables (Modern CSS)

:root {

--main-padding: 1rem;

.container {

padding: var(--main-padding);

@media (min-width: 768px) {

:root {

--main-padding: 2rem;

Bonus: Responsive Grid Layout

.grid {

display: grid;

grid-template-columns: 1fr;

gap: 1rem;

@media (min-width: 768px) {

 .grid {

grid-template-columns: repeat(2, 1fr);

@media (min-width: 1024px) {

.grid {

grid-template-columns: repeat(3, 1fr);