1.block                -> display: block;
2.inline               -> display: inline;
3.inline-block         -> display: inline-block;
4.flex                 -> display: flex;
5.inline-flex          -> display: inline-flex;
6.grid                 -> display: grid;
7.hidden               -> display: none;
8
9.visible              -> visibility: visible;
10.invisible            -> visibility: hidden;
11
12.overflow-hidden      -> overflow: hidden;
13.overflow-auto        -> overflow: auto;
14.overflow-scroll      -> overflow: scroll;
15.overflow-x-auto      -> overflow-x: auto;
16.overflow-y-auto      -> overflow-y: auto;

1.static               -> position: static;
2.relative             -> position: relative;
3.absolute             -> position: absolute;
4.fixed                -> position: fixed;
5.sticky               -> position: sticky;
6
7.inset-0              -> top: 0; right: 0; bottom: 0; left: 0;
8.inset-x-0            -> left: 0; right: 0;
9.inset-y-0            -> top: 0; bottom: 0;
10.top-0                -> top: 0;
11.right-0              -> right: 0;
12.bottom-0             -> bottom: 0;
13.left-0               -> left: 0;
14
15/* Common offsets (Tailwind spacing scale) */
16.top-1                -> top: 0.25rem;        /* 4px */
17.top-2                -> top: 0.5rem;         /* 8px */
18.top-4                -> top: 1rem;           /* 16px */
19.top-8                -> top: 2rem;           /* 32px */
20
21.z-0                  -> z-index: 0;
22.z-10                 -> z-index: 10;
23.z-20                 -> z-index: 20;
24.z-30                 -> z-index: 30;
25.z-40                 -> z-index: 40;
26.z-50                 -> z-index: 50;
27.z-auto               -> z-index: auto;

1/* Margin (all sides) */
2.m-0                  -> margin: 0;
3.m-px                 -> margin: 1px;
4.m-4                  -> margin: 1rem;
5
6/* Margin (axis) */
7.mx-4                 -> margin-left: 1rem; margin-right: 1rem;
8.my-2                 -> margin-top: 0.5rem; margin-bottom: 0.5rem;
9
10/* Margin (sides) */
11.mt-6                 -> margin-top: 1.5rem;
12.mr-3                 -> margin-right: 0.75rem;
13.mb-8                 -> margin-bottom: 2rem;
14.ml-1.5               -> margin-left: 0.375rem;
15
16/* Auto centering */
17.mx-auto              -> margin-left: auto; margin-right: auto;
18
19/* Negative margins */
20.-mt-4                -> margin-top: -1rem;
21
22/* Padding mirrors margin */
23.p-4                  -> padding: 1rem;
24.px-6                 -> padding-left: 1.5rem; padding-right: 1.5rem;
25.py-2.5               -> padding-top: 0.625rem; padding-bottom: 0.625rem;
26.pt-3                 -> padding-top: 0.75rem;

1.flex-row             -> flex-direction: row;
2.flex-row-reverse     -> flex-direction: row-reverse;
3.flex-col             -> flex-direction: column;
4.flex-col-reverse     -> flex-direction: column-reverse;
5
6.flex-wrap            -> flex-wrap: wrap;
7.flex-nowrap          -> flex-wrap: nowrap;
8.flex-wrap-reverse    -> flex-wrap: wrap-reverse;
9
10.items-start          -> align-items: flex-start;
11.items-center         -> align-items: center;
12.items-end            -> align-items: flex-end;
13.items-stretch        -> align-items: stretch;
14.items-baseline       -> align-items: baseline;
15
16.justify-start        -> justify-content: flex-start;
17.justify-center       -> justify-content: center;
18.justify-end          -> justify-content: flex-end;
19.justify-between      -> justify-content: space-between;
20.justify-around       -> justify-content: space-around;
21.justify-evenly       -> justify-content: space-evenly;
22
23.content-start        -> align-content: flex-start;
24.content-center       -> align-content: center;
25.content-end          -> align-content: flex-end;
26.content-between      -> align-content: space-between;
27.content-around       -> align-content: space-around;
28.content-evenly       -> align-content: space-evenly;
29
30.gap-0                -> gap: 0;
31.gap-2                -> gap: 0.5rem;
32.gap-4                -> gap: 1rem;
33.gap-x-6              -> column-gap: 1.5rem;
34.gap-y-3              -> row-gap: 0.75rem;
35
36.self-auto            -> align-self: auto;
37.self-start           -> align-self: flex-start;
38.self-center          -> align-self: center;
39.self-end             -> align-self: flex-end;
40.self-stretch         -> align-self: stretch;
41
42.flex-1               -> flex: 1 1 0%;
43.flex-auto            -> flex: 1 1 auto;
44.flex-initial         -> flex: 0 1 auto;
45.flex-none            -> flex: none;
46
47.grow                 -> flex-grow: 1;
48.grow-0               -> flex-grow: 0;
49.shrink               -> flex-shrink: 1;
50.shrink-0             -> flex-shrink: 0;
51
52.order-first          -> order: -9999;
53.order-last           -> order: 9999;
54.order-none           -> order: 0;
55.order-1              -> order: 1;

1.grid-cols-1          -> grid-template-columns: repeat(1, minmax(0, 1fr));
2.grid-cols-2          -> grid-template-columns: repeat(2, minmax(0, 1fr));
3.grid-cols-3          -> grid-template-columns: repeat(3, minmax(0, 1fr));
4.grid-cols-12         -> grid-template-columns: repeat(12, minmax(0, 1fr));
5
6.col-span-1           -> grid-column: span 1 / span 1;
7.col-span-3           -> grid-column: span 3 / span 3;
8.col-start-2          -> grid-column-start: 2;
9.col-end-4            -> grid-column-end: 4;
10
11.grid-rows-3          -> grid-template-rows: repeat(3, minmax(0, 1fr));
12.row-span-2           -> grid-row: span 2 / span 2;
13
14.gap-4                -> gap: 1rem;
15.gap-x-8              -> column-gap: 2rem;
16.gap-y-2              -> row-gap: 0.5rem;
17
18.place-items-center   -> place-items: center;
19.place-content-center -> place-content: center;

1/* Width */
2.w-0                  -> width: 0;
3.w-px                 -> width: 1px;
4.w-4                  -> width: 1rem;
5.w-10                 -> width: 2.5rem;
6.w-1/2                -> width: 50%;
7.w-1/3                -> width: 33.333333%;
8.w-2/3                -> width: 66.666667%;
9.w-1/4                -> width: 25%;
10.w-3/4                -> width: 75%;
11.w-full               -> width: 100%;
12.w-screen             -> width: 100vw;
13.max-w-xs             -> max-width: 20rem;      /* 320px */
14.max-w-sm             -> max-width: 24rem;      /* 384px */
15.max-w-md             -> max-width: 28rem;      /* 448px */
16.max-w-lg             -> max-width: 32rem;      /* 512px */
17.max-w-xl             -> max-width: 36rem;      /* 576px */
18.max-w-2xl            -> max-width: 42rem;      /* 672px */
19.max-w-4xl            -> max-width: 56rem;      /* 896px */
20.max-w-7xl            -> max-width: 80rem;      /* 1280px */
21
22/* Height */
23.h-0                  -> height: 0;
24.h-px                 -> height: 1px;
25.h-4                  -> height: 1rem;
26.h-10                 -> height: 2.5rem;
27.h-full               -> height: 100%;
28.h-screen             -> height: 100vh;
29.min-h-screen         -> min-height: 100vh;

1.text-xs              -> font-size: 0.75rem; line-height: 1rem;
2.text-sm              -> font-size: 0.875rem; line-height: 1.25rem;
3.text-base            -> font-size: 1rem; line-height: 1.5rem;
4.text-lg              -> font-size: 1.125rem; line-height: 1.75rem;
5.text-xl              -> font-size: 1.25rem; line-height: 1.75rem;
6.text-2xl             -> font-size: 1.5rem; line-height: 2rem;
7.text-3xl             -> font-size: 1.875rem; line-height: 2.25rem;
8.text-4xl             -> font-size: 2.25rem; line-height: 2.5rem;
9.text-5xl             -> font-size: 3rem; line-height: 1;
10.text-6xl             -> font-size: 3.75rem; line-height: 1;

1.font-light           -> font-weight: 300;
2.font-normal          -> font-weight: 400;
3.font-medium          -> font-weight: 500;
4.font-semibold        -> font-weight: 600;
5.font-bold            -> font-weight: 700;
6
7.italic               -> font-style: italic;
8.not-italic           -> font-style: normal;
9
10.text-left            -> text-align: left;
11.text-center          -> text-align: center;
12.text-right           -> text-align: right;
13.text-justify         -> text-align: justify;
14
15/* Line-height */
16.leading-none         -> line-height: 1;
17.leading-tight        -> line-height: 1.25;
18.leading-snug         -> line-height: 1.375;
19.leading-normal       -> line-height: 1.5;
20.leading-relaxed      -> line-height: 1.625;
21.leading-loose        -> line-height: 2;
22
23/* Letter-spacing */
24.tracking-tighter     -> letter-spacing: -0.05em;
25.tracking-tight       -> letter-spacing: -0.025em;
26.tracking-normal      -> letter-spacing: 0;
27.tracking-wide        -> letter-spacing: 0.025em;
28.tracking-wider       -> letter-spacing: 0.05em;
29.tracking-widest      -> letter-spacing: 0.1em;

1.text-black           -> color: #000000;
2.text-white           -> color: #ffffff;
3.text-gray-500        -> color: #6b7280;
4.text-slate-700       -> color: #334155;
5.text-blue-500        -> color: #3b82f6;
6.text-emerald-600     -> color: #059669;
7
8.bg-white             -> background-color: #ffffff;
9.bg-gray-100          -> background-color: #f3f4f6;
10.bg-slate-900         -> background-color: #0f172a;
11.bg-blue-600          -> background-color: #2563eb;
12.bg-rose-500          -> background-color: #f43f5e;
13
14.decoration-sky-500   -> text-decoration-color: #0ea5e9;
15.underline            -> text-decoration-line: underline;
16.no-underline         -> text-decoration-line: none;

1.border               -> border-width: 1px;
2.border-0             -> border-width: 0;
3.border-2             -> border-width: 2px;
4.border-4             -> border-width: 4px;
5.border-t             -> border-top-width: 1px;
6.border-x-2           -> border-left-width: 2px; border-right-width: 2px;
7
8.border-solid         -> border-style: solid;
9.border-dashed        -> border-style: dashed;
10.border-dotted        -> border-style: dotted;
11
12.border-gray-200      -> border-color: #e5e7eb;
13.border-slate-700     -> border-color: #334155;
14.border-blue-500      -> border-color: #3b82f6;
15
16/* Radius */
17.rounded-none         -> border-radius: 0;
18.rounded-sm           -> border-radius: 0.125rem;
19.rounded               -> border-radius: 0.25rem;
20.rounded-md           -> border-radius: 0.375rem;
21.rounded-lg           -> border-radius: 0.5rem;
22.rounded-xl           -> border-radius: 0.75rem;
23.rounded-2xl          -> border-radius: 1rem;
24.rounded-3xl          -> border-radius: 1.5rem;
25.rounded-full         -> border-radius: 9999px;
26.rounded-t-lg         -> border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;

1.shadow-sm            -> box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
2.shadow               -> box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
3.shadow-md            -> box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
4.shadow-lg            -> box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
5.shadow-xl            -> box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
6.shadow-2xl           -> box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
7.shadow-inner         -> box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
8.shadow-none          -> box-shadow: 0 0 #0000;
9
10/* Rings */
11.ring                 -> box-shadow: 0 0 0 3px rgb(59 130 246 / 0.5);  /* default ring color blue-500 at 50% */
12.ring-2               -> box-shadow: 0 0 0 2px currentColor;
13.ring-4               -> box-shadow: 0 0 0 4px currentColor;
14.ring-offset-2        -> box-shadow: 0 0 0 2px #fff, 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) currentColor;
15
16/* Filters */
17.blur-sm              -> filter: blur(4px);
18.blur                 -> filter: blur(8px);
19.blur-lg              -> filter: blur(16px);
20.brightness-110       -> filter: brightness(1.1);
21.contrast-125         -> filter: contrast(1.25);
22.grayscale            -> filter: grayscale(100%);
23.hue-rotate-60        -> filter: hue-rotate(60deg);
24.saturate-150         -> filter: saturate(1.5);
25.sepia                -> filter: sepia(100%);

1.transition           -> transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2.transition-colors    -> transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
3.transition-opacity   -> transition-property: opacity;
4.duration-75          -> transition-duration: 75ms;
5.duration-150         -> transition-duration: 150ms;
6.duration-300         -> transition-duration: 300ms;
7.ease-linear          -> transition-timing-function: linear;
8.ease-in              -> transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
9.ease-out             -> transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
10.ease-in-out          -> transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
11
12.transform            -> transform: translate(var(--tw-translate-x,0), var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1));
13.scale-50             -> --tw-scale-x: .5; --tw-scale-y: .5; transform: ...;
14.scale-95             -> --tw-scale-x: .95; --tw-scale-y: .95; transform: ...;
15.scale-100            -> --tw-scale-x: 1; --tw-scale-y: 1; transform: ...;
16.rotate-45            -> --tw-rotate: 45deg; transform: ...;
17.-rotate-12           -> --tw-rotate: -12deg; transform: ...;
18.translate-x-4        -> --tw-translate-x: 1rem; transform: ...;
19.-translate-y-1/2     -> --tw-translate-y: -50%; transform: ...;

1.opacity-0            -> opacity: 0;
2.opacity-50           -> opacity: 0.5;
3.opacity-100          -> opacity: 1;
4
5.cursor-pointer       -> cursor: pointer;
6.cursor-not-allowed   -> cursor: not-allowed;
7
8.pointer-events-none  -> pointer-events: none;
9.pointer-events-auto  -> pointer-events: auto;
10
11.select-none          -> user-select: none;
12.select-text          -> user-select: text;

1.object-contain       -> object-fit: contain;
2.object-cover         -> object-fit: cover;
3.object-center        -> object-position: center;
4.object-left          -> object-position: left;
5
6.bg-fixed             -> background-attachment: fixed;
7.bg-local             -> background-attachment: local;
8.bg-scroll            -> background-attachment: scroll;
9
10.bg-center            -> background-position: center;
11.bg-top               -> background-position: top;
12.bg-bottom            -> background-position: bottom;
13
14.bg-no-repeat         -> background-repeat: no-repeat;
15.bg-repeat-x          -> background-repeat: repeat-x;
16
17.bg-contain           -> background-size: contain;
18.bg-cover             -> background-size: cover;
19
20.bg-gradient-to-r     -> background-image: linear-gradient(to right, var(--tw-gradient-stops));
21.from-blue-500        -> --tw-gradient-from: #3b82f6; --tw-gradient-to: rgb(59 130 246 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
22.via-purple-500       -> --tw-gradient-via: #a855f7;
23.to-pink-500          -> --tw-gradient-to: #ec4899;

1.list-disc            -> list-style-type: disc;
2.list-decimal         -> list-style-type: decimal;
3.list-none            -> list-style-type: none;
4
5.table                -> display: table;
6.table-fixed          -> table-layout: fixed;
7.border-collapse      -> border-collapse: collapse;
8.border-separate      -> border-collapse: separate;
9
10.align-top            -> vertical-align: top;
11.align-middle         -> vertical-align: middle;
12.align-bottom         -> vertical-align: bottom;
13
14.shadow-none          -> box-shadow: 0 0 #0000;
15.outline-none         -> outline: 2px solid transparent; outline-offset: 2px;

1/* Example: md:text-lg */
2@media (min-width: 768px) {
3  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
4}

1/* Example: hover:bg-blue-600 */
2.button:hover { background-color: #2563eb; }
3
4/* Example: focus:ring */
5.input:focus { box-shadow: 0 0 0 3px rgb(59 130 246 / 0.5); }

1/* Center a div */
2.flex.items-center.justify-center -> display: flex; align-items: center; justify-content: center;
3
4/* Card */
5.rounded-lg.shadow-md.p-6.bg-white -> border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); padding: 1.5rem; background-color: #fff;
6
7/* Responsive grid */
8.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-6 ->
9  display: grid;
10  grid-template-columns: repeat(1, minmax(0, 1fr));
11  gap: 1.5rem;
12@media (min-width: 768px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
13@media (min-width: 1024px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }