NotionNext BLOG https://blog.hiyb.top/ 这是一个由NotionNext生成的站点 Sat, 23 Mar 2024 01:58:34 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2024, worst developer <![CDATA[在 Nuxt 项目中接入Google Analytics 4]]> https://blog.hiyb.top/article/18 https://blog.hiyb.top/article/18 Wed, 20 Mar 2024 00:00:00 GMT

在 Nuxt 项目中接入 Google Analytics 4

1. 注册账号并创建项目

首先，需要注册一个Google Analytics账号并创建一个新项目。访问 Google Analytics 网站，根据提示开通相应的账号并创建自己的项目。

2. 普通网站引入方式

通常，我们需要在 index.html 文件的 <head> 标签中引入以下脚本：

3. 在 Nuxt 项目中引入

3.1 修改配置文件

修改nuxt.config.ts配置如下：

3.2 抽离并新建初始化 JS

在项目的 /static 文件夹下新建一个 js 文件夹，并在其中创建名为 analytics.js 的 JS 文件，将剩余代码写入其中：

3.3 或者修改 App.vue 引入 analytics.js

在 App.vue 组件的 useHead 方法中引用刚才创建的脚本即可：
说明：替换G-XXXXXXXXXX为自己的Google Analytics项目的ID。
大约24小时之后，Google就会开始搜集访问网站的数据🚀
]]> <![CDATA[[tailwindcss] —— SVG]]> https://blog.hiyb.top/article/17 https://blog.hiyb.top/article/17 Wed, 06 Mar 2024 00:00:00 GMT

Fill

Class
Properties
fill-none
fill: none;
fill-inherit
fill: inherit;
fill-current
fill: currentColor;
fill-transparent
fill: transparent;
fill-black
fill: #000;
fill-white
fill: #fff;
fill-slate-50
fill: #f8fafc;
fill-slate-100
fill: #f1f5f9;
fill-slate-200
fill: #e2e8f0;
fill-slate-300
fill: #cbd5e1;
fill-slate-400
fill: #94a3b8;
fill-slate-500
fill: #64748b;
fill-slate-600
fill: #475569;
fill-slate-700
fill: #334155;
fill-slate-800
fill: #1e293b;
fill-slate-900
fill: #0f172a;
fill-slate-950
fill: #020617;
fill-gray-50
fill: #f9fafb;
fill-gray-100
fill: #f3f4f6;
fill-gray-200
fill: #e5e7eb;
fill-gray-300
fill: #d1d5db;
fill-gray-400
fill: #9ca3af;
fill-gray-500
fill: #6b7280;
fill-gray-600
fill: #4b5563;
fill-gray-700
fill: #374151;
fill-gray-800
fill: #1f2937;
fill-gray-900
fill: #111827;
fill-gray-950
fill: #030712;
fill-zinc-50
fill: #fafafa;
fill-zinc-100
fill: #f4f4f5;
fill-zinc-200
fill: #e4e4e7;
fill-zinc-300
fill: #d4d4d8;
fill-zinc-400
fill: #a1a1aa;
fill-zinc-500
fill: #71717a;
fill-zinc-600
fill: #52525b;
fill-zinc-700
fill: #3f3f46;
fill-zinc-800
fill: #27272a;
fill-zinc-900
fill: #18181b;
fill-zinc-950
fill: #09090b;
fill-neutral-50
fill: #fafafa;
fill-neutral-100
fill: #f5f5f5;
fill-neutral-200
fill: #e5e5e5;
fill-neutral-300
fill: #d4d4d4;
fill-neutral-400
fill: #a3a3a3;
fill-neutral-500
fill: #737373;
fill-neutral-600
fill: #525252;
fill-neutral-700
fill: #404040;
fill-neutral-800
fill: #262626;
fill-neutral-900
fill: #171717;
fill-neutral-950
fill: #0a0a0a;
fill-stone-50
fill: #fafaf9;
fill-stone-100
fill: #f5f5f4;
fill-stone-200
fill: #e7e5e4;
fill-stone-300
fill: #d6d3d1;
fill-stone-400
fill: #a8a29e;
fill-stone-500
fill: #78716c;
fill-stone-600
fill: #57534e;
fill-stone-700
fill: #44403c;
fill-stone-800
fill: #292524;
fill-stone-900
fill: #1c1917;
fill-stone-950
fill: #0c0a09;
fill-red-50
fill: #fef2f2;
fill-red-100
fill: #fee2e2;
fill-red-200
fill: #fecaca;
fill-red-300
fill: #fca5a5;
fill-red-400
fill: #f87171;
fill-red-500
fill: #ef4444;
fill-red-600
fill: #dc2626;
fill-red-700
fill: #b91c1c;
fill-red-800
fill: #991b1b;
fill-red-900
fill: #7f1d1d;
fill-red-950
fill: #450a0a;
fill-orange-50
fill: #fff7ed;
fill-orange-100
fill: #ffedd5;
fill-orange-200
fill: #fed7aa;
fill-orange-300
fill: #fdba74;
fill-orange-400
fill: #fb923c;
fill-orange-500
fill: #f97316;
fill-orange-600
fill: #ea580c;
fill-orange-700
fill: #c2410c;
fill-orange-800
fill: #9a3412;
fill-orange-900
fill: #7c2d12;
fill-orange-950
fill: #431407;
fill-amber-50
fill: #fffbeb;
fill-amber-100
fill: #fef3c7;
fill-amber-200
fill: #fde68a;
fill-amber-300
fill: #fcd34d;
fill-amber-400
fill: #fbbf24;
fill-amber-500
fill: #f59e0b;
fill-amber-600
fill: #d97706;
fill-amber-700
fill: #b45309;
fill-amber-800
fill: #92400e;
fill-amber-900
fill: #78350f;
fill-amber-950
fill: #451a03;
fill-yellow-50
fill: #fefce8;
fill-yellow-100
fill: #fef9c3;
fill-yellow-200
fill: #fef08a;
fill-yellow-300
fill: #fde047;
fill-yellow-400
fill: #facc15;
fill-yellow-500
fill: #eab308;
fill-yellow-600
fill: #ca8a04;
fill-yellow-700
fill: #a16207;
fill-yellow-800
fill: #854d0e;
fill-yellow-900
fill: #713f12;
fill-yellow-950
fill: #422006;
fill-lime-50
fill: #f7fee7;
fill-lime-100
fill: #ecfccb;
fill-lime-200
fill: #d9f99d;
fill-lime-300
fill: #bef264;
fill-lime-400
fill: #a3e635;
fill-lime-500
fill: #84cc16;
fill-lime-600
fill: #65a30d;
fill-lime-700
fill: #4d7c0f;
fill-lime-800
fill: #3f6212;
fill-lime-900
fill: #365314;
fill-lime-950
fill: #1a2e05;
fill-green-50
fill: #f0fdf4;
fill-green-100
fill: #dcfce7;
fill-green-200
fill: #bbf7d0;
fill-green-300
fill: #86efac;
fill-green-400
fill: #4ade80;
fill-green-500
fill: #22c55e;
fill-green-600
fill: #16a34a;
fill-green-700
fill: #15803d;
fill-green-800
fill: #166534;
fill-green-900
fill: #14532d;
fill-green-950
fill: #052e16;
fill-emerald-50
fill: #ecfdf5;
fill-emerald-100
fill: #d1fae5;
fill-emerald-200
fill: #a7f3d0;
fill-emerald-300
fill: #6ee7b7;
fill-emerald-400
fill: #34d399;
fill-emerald-500
fill: #10b981;
fill-emerald-600
fill: #059669;
fill-emerald-700
fill: #047857;
fill-emerald-800
fill: #065f46;
fill-emerald-900
fill: #064e3b;
fill-emerald-950
fill: #022c22;
fill-teal-50
fill: #f0fdfa;
fill-teal-100
fill: #ccfbf1;
fill-teal-200
fill: #99f6e4;
fill-teal-300
fill: #5eead4;
fill-teal-400
fill: #2dd4bf;
fill-teal-500
fill: #14b8a6;
fill-teal-600
fill: #0d9488;
fill-teal-700
fill: #0f766e;
fill-teal-800
fill: #115e59;
fill-teal-900
fill: #134e4a;
fill-teal-950
fill: #042f2e;
fill-cyan-50
fill: #ecfeff;
fill-cyan-100
fill: #cffafe;
fill-cyan-200
fill: #a5f3fc;
fill-cyan-300
fill: #67e8f9;
fill-cyan-400
fill: #22d3ee;
fill-cyan-500
fill: #06b6d4;
fill-cyan-600
fill: #0891b2;
fill-cyan-700
fill: #0e7490;
fill-cyan-800
fill: #155e75;
fill-cyan-900
fill: #164e63;
fill-cyan-950
fill: #083344;
fill-sky-50
fill: #f0f9ff;
fill-sky-100
fill: #e0f2fe;
fill-sky-200
fill: #bae6fd;
fill-sky-300
fill: #7dd3fc;
fill-sky-400
fill: #38bdf8;
fill-sky-500
fill: #0ea5e9;
fill-sky-600
fill: #0284c7;
fill-sky-700
fill: #0369a1;
fill-sky-800
fill: #075985;
fill-sky-900
fill: #0c4a6e;
fill-sky-950
fill: #082f49;
fill-blue-50
fill: #eff6ff;
fill-blue-100
fill: #dbeafe;
fill-blue-200
fill: #bfdbfe;
fill-blue-300
fill: #93c5fd;
fill-blue-400
fill: #60a5fa;
fill-blue-500
fill: #3b82f6;
fill-blue-600
fill: #2563eb;
fill-blue-700
fill: #1d4ed8;
fill-blue-800
fill: #1e40af;
fill-blue-900
fill: #1e3a8a;
fill-blue-950
fill: #172554;
fill-indigo-50
fill: #eef2ff;
fill-indigo-100
fill: #e0e7ff;
fill-indigo-200
fill: #c7d2fe;
fill-indigo-300
fill: #a5b4fc;
fill-indigo-400
fill: #818cf8;
fill-indigo-500
fill: #6366f1;
fill-indigo-600
fill: #4f46e5;
fill-indigo-700
fill: #4338ca;
fill-indigo-800
fill: #3730a3;
fill-indigo-900
fill: #312e81;
fill-indigo-950
fill: #1e1b4b;
fill-violet-50
fill: #f5f3ff;
fill-violet-100
fill: #ede9fe;
fill-violet-200
fill: #ddd6fe;
fill-violet-300
fill: #c4b5fd;
fill-violet-400
fill: #a78bfa;
fill-violet-500
fill: #8b5cf6;
fill-violet-600
fill: #7c3aed;
fill-violet-700
fill: #6d28d9;
fill-violet-800
fill: #5b21b6;
fill-violet-900
fill: #4c1d95;
fill-violet-950
fill: #2e1065;
fill-purple-50
fill: #faf5ff;
fill-purple-100
fill: #f3e8ff;
fill-purple-200
fill: #e9d5ff;
fill-purple-300
fill: #d8b4fe;
fill-purple-400
fill: #c084fc;
fill-purple-500
fill: #a855f7;
fill-purple-600
fill: #9333ea;
fill-purple-700
fill: #7e22ce;
fill-purple-800
fill: #6b21a8;
fill-purple-900
fill: #581c87;
fill-purple-950
fill: #3b0764;
fill-fuchsia-50
fill: #fdf4ff;
fill-fuchsia-100
fill: #fae8ff;
fill-fuchsia-200
fill: #f5d0fe;
fill-fuchsia-300
fill: #f0abfc;
fill-fuchsia-400
fill: #e879f9;
fill-fuchsia-500
fill: #d946ef;
fill-fuchsia-600
fill: #c026d3;
fill-fuchsia-700
fill: #a21caf;
fill-fuchsia-800
fill: #86198f;
fill-fuchsia-900
fill: #701a75;
fill-fuchsia-950
fill: #4a044e;
fill-pink-50
fill: #fdf2f8;
fill-pink-100
fill: #fce7f3;
fill-pink-200
fill: #fbcfe8;
fill-pink-300
fill: #f9a8d4;
fill-pink-400
fill: #f472b6;
fill-pink-500
fill: #ec4899;
fill-pink-600
fill: #db2777;
fill-pink-700
fill: #be185d;
fill-pink-800
fill: #9d174d;
fill-pink-900
fill: #831843;
fill-pink-950
fill: #500724;
fill-rose-50
fill: #fff1f2;
fill-rose-100
fill: #ffe4e6;
fill-rose-200
fill: #fecdd3;
fill-rose-300
fill: #fda4af;
fill-rose-400
fill: #fb7185;
fill-rose-500
fill: #f43f5e;
fill-rose-600
fill: #e11d48;
fill-rose-700
fill: #be123c;
fill-rose-800
fill: #9f1239;
fill-rose-900
fill: #881337;
fill-rose-950
fill: #4c0519;

Stroke

Class
Properties
Class
Properties
stroke-none
stroke: none;
stroke-inherit
stroke: inherit;
stroke-current
stroke: currentColor;
stroke-transparent
stroke: transparent;
stroke-black
stroke: #000;
stroke-white
stroke: #fff;
stroke-slate-50
stroke: #f8fafc;
stroke-slate-100
stroke: #f1f5f9;
更多该样式见官网：

Stroke Width

Class
Properties
stroke-0
stroke-width: 0;
stroke-1
stroke-width: 1;
stroke-2
stroke-width: 2;
 
]]> <![CDATA[[tailwindcss] —— Interactivity]]> https://blog.hiyb.top/article/16 https://blog.hiyb.top/article/16 Wed, 06 Mar 2024 00:00:00 GMT

Accent Color

Class
Properties
accent-inherit
accent-color: inherit;
accent-current
accent-color: currentColor;
accent-transparent
accent-color: transparent;
accent-black
accent-color: #000;
accent-white
accent-color: #fff;
accent-slate-50
accent-color: #f8fafc;
accent-slate-100
accent-color: #f1f5f9;
accent-slate-200
accent-color: #e2e8f0;
更多该样式见官网：

Appearance

Class
Properties
appearance-none
appearance: none;
appearance-auto
appearance: auto;

Cursor

Class
Properties
cursor-auto
cursor: auto;
cursor-default
cursor: default;
cursor-pointer
cursor: pointer;
cursor-wait
cursor: wait;
cursor-text
cursor: text;
cursor-move
cursor: move;
cursor-help
cursor: help;
cursor-not-allowed
cursor: not-allowed;
cursor-none
cursor: none;
cursor-context-menu
cursor: context-menu;
cursor-progress
cursor: progress;
cursor-cell
cursor: cell;
cursor-crosshair
cursor: crosshair;
cursor-vertical-text
cursor: vertical-text;
cursor-alias
cursor: alias;
cursor-copy
cursor: copy;
cursor-no-drop
cursor: no-drop;
cursor-grab
cursor: grab;
cursor-grabbing
cursor: grabbing;
cursor-all-scroll
cursor: all-scroll;
cursor-col-resize
cursor: col-resize;
cursor-row-resize
cursor: row-resize;
cursor-n-resize
cursor: n-resize;
cursor-e-resize
cursor: e-resize;
cursor-s-resize
cursor: s-resize;
cursor-w-resize
cursor: w-resize;
cursor-ne-resize
cursor: ne-resize;
cursor-nw-resize
cursor: nw-resize;
cursor-se-resize
cursor: se-resize;
cursor-sw-resize
cursor: sw-resize;
cursor-ew-resize
cursor: ew-resize;
cursor-ns-resize
cursor: ns-resize;
cursor-nesw-resize
cursor: nesw-resize;
cursor-nwse-resize
cursor: nwse-resize;
cursor-zoom-in
cursor: zoom-in;
cursor-zoom-out
cursor: zoom-out;

Caret Color

Class
Properties
caret-inherit
caret-color: inherit;
caret-current
caret-color: currentColor;
caret-transparent
caret-color: transparent;
caret-black
caret-color: #000;
caret-white
caret-color: #fff;
caret-slate-50
caret-color: #f8fafc;
caret-slate-100
caret-color: #f1f5f9;
caret-slate-200
caret-color: #e2e8f0;
更多该样式见官网：

Pointer Events

Class
Properties
pointer-events-none
pointer-events: none;
pointer-events-auto
pointer-events: auto;

Resize

Class
Properties
Class
Properties
resize-none
resize: none;
resize-y
resize: vertical;
resize-x
resize: horizontal;
resize
resize: both;

Scroll Behavior

Class
Properties
scroll-auto
scroll-behavior: auto;
scroll-smooth
scroll-behavior: smooth;

Scroll Margin

Class
Properties
scroll-m-0
scroll-margin: 0px;
scroll-mx-0
scroll-margin-left: 0px; scroll-margin-right: 0px;
scroll-my-0
scroll-margin-top: 0px; scroll-margin-bottom: 0px;
scroll-ms-0
scroll-margin-inline-start: 0px;
scroll-me-0
scroll-margin-inline-end: 0px;
scroll-mt-0
scroll-margin-top: 0px;
scroll-mr-0
scroll-margin-right: 0px;
scroll-mb-0
scroll-margin-bottom: 0px;
scroll-ml-0
scroll-margin-left: 0px;
scroll-m-px
scroll-margin: 1px;
scroll-mx-px
scroll-margin-left: 1px; scroll-margin-right: 1px;
scroll-my-px
scroll-margin-top: 1px; scroll-margin-bottom: 1px;
scroll-ms-px
scroll-margin-inline-start: 1px;
scroll-me-px
scroll-margin-inline-end: 1px;
scroll-mt-px
scroll-margin-top: 1px;
scroll-mr-px
scroll-margin-right: 1px;
scroll-mb-px
scroll-margin-bottom: 1px;
scroll-ml-px
scroll-margin-left: 1px;
scroll-m-0.5
scroll-margin: 0.125rem; /* 2px */
scroll-mx-0.5
scroll-margin-left: 0.125rem; /* 2px */ scroll-margin-right: 0.125rem; /* 2px */
scroll-my-0.5
scroll-margin-top: 0.125rem; /* 2px */ scroll-margin-bottom: 0.125rem; /* 2px */
scroll-ms-0.5
scroll-margin-inline-start: 0.125rem; /* 2px */
scroll-me-0.5
scroll-margin-inline-end: 0.125rem; /* 2px */
scroll-mt-0.5
scroll-margin-top: 0.125rem; /* 2px */
scroll-mr-0.5
scroll-margin-right: 0.125rem; /* 2px */
scroll-mb-0.5
scroll-margin-bottom: 0.125rem; /* 2px */
scroll-ml-0.5
scroll-margin-left: 0.125rem; /* 2px */
scroll-m-1
scroll-margin: 0.25rem; /* 4px */
scroll-mx-1
scroll-margin-left: 0.25rem; /* 4px */ scroll-margin-right: 0.25rem; /* 4px */
scroll-my-1
scroll-margin-top: 0.25rem; /* 4px */ scroll-margin-bottom: 0.25rem; /* 4px */
scroll-ms-1
scroll-margin-inline-start: 0.25rem; /* 4px */
scroll-me-1
scroll-margin-inline-end: 0.25rem; /* 4px */
scroll-mt-1
scroll-margin-top: 0.25rem; /* 4px */
scroll-mr-1
scroll-margin-right: 0.25rem; /* 4px */
scroll-mb-1
scroll-margin-bottom: 0.25rem; /* 4px */
scroll-ml-1
scroll-margin-left: 0.25rem; /* 4px */
scroll-m-1.5
scroll-margin: 0.375rem; /* 6px */
scroll-mx-1.5
scroll-margin-left: 0.375rem; /* 6px */ scroll-margin-right: 0.375rem; /* 6px */
scroll-my-1.5
scroll-margin-top: 0.375rem; /* 6px */ scroll-margin-bottom: 0.375rem; /* 6px */
scroll-ms-1.5
scroll-margin-inline-start: 0.375rem; /* 6px */
scroll-me-1.5
scroll-margin-inline-end: 0.375rem; /* 6px */
scroll-mt-1.5
scroll-margin-top: 0.375rem; /* 6px */
scroll-mr-1.5
scroll-margin-right: 0.375rem; /* 6px */
scroll-mb-1.5
scroll-margin-bottom: 0.375rem; /* 6px */
scroll-ml-1.5
scroll-margin-left: 0.375rem; /* 6px */
scroll-m-2
scroll-margin: 0.5rem; /* 8px */
scroll-mx-2
scroll-margin-left: 0.5rem; /* 8px */ scroll-margin-right: 0.5rem; /* 8px */
scroll-my-2
scroll-margin-top: 0.5rem; /* 8px */ scroll-margin-bottom: 0.5rem; /* 8px */
scroll-ms-2
scroll-margin-inline-start: 0.5rem; /* 8px */
scroll-me-2
scroll-margin-inline-end: 0.5rem; /* 8px */
scroll-mt-2
scroll-margin-top: 0.5rem; /* 8px */
scroll-mr-2
scroll-margin-right: 0.5rem; /* 8px */
scroll-mb-2
scroll-margin-bottom: 0.5rem; /* 8px */
scroll-ml-2
scroll-margin-left: 0.5rem; /* 8px */
scroll-m-2.5
scroll-margin: 0.625rem; /* 10px */
scroll-mx-2.5
scroll-margin-left: 0.625rem; /* 10px */ scroll-margin-right: 0.625rem; /* 10px */
scroll-my-2.5
scroll-margin-top: 0.625rem; /* 10px */ scroll-margin-bottom: 0.625rem; /* 10px */
scroll-ms-2.5
scroll-margin-inline-start: 0.625rem; /* 10px */
scroll-me-2.5
scroll-margin-inline-end: 0.625rem; /* 10px */
scroll-mt-2.5
scroll-margin-top: 0.625rem; /* 10px */
scroll-mr-2.5
scroll-margin-right: 0.625rem; /* 10px */
scroll-mb-2.5
scroll-margin-bottom: 0.625rem; /* 10px */
scroll-ml-2.5
scroll-margin-left: 0.625rem; /* 10px */
scroll-m-3
scroll-margin: 0.75rem; /* 12px */
scroll-mx-3
scroll-margin-left: 0.75rem; /* 12px */ scroll-margin-right: 0.75rem; /* 12px */
scroll-my-3
scroll-margin-top: 0.75rem; /* 12px */ scroll-margin-bottom: 0.75rem; /* 12px */
scroll-ms-3
scroll-margin-inline-start: 0.75rem; /* 12px */
scroll-me-3
scroll-margin-inline-end: 0.75rem; /* 12px */
scroll-mt-3
scroll-margin-top: 0.75rem; /* 12px */
scroll-mr-3
scroll-margin-right: 0.75rem; /* 12px */
scroll-mb-3
scroll-margin-bottom: 0.75rem; /* 12px */
scroll-ml-3
scroll-margin-left: 0.75rem; /* 12px */
scroll-m-3.5
scroll-margin: 0.875rem; /* 14px */
scroll-mx-3.5
scroll-margin-left: 0.875rem; /* 14px */ scroll-margin-right: 0.875rem; /* 14px */
scroll-my-3.5
scroll-margin-top: 0.875rem; /* 14px */ scroll-margin-bottom: 0.875rem; /* 14px */
scroll-ms-3.5
scroll-margin-inline-start: 0.875rem; /* 14px */
scroll-me-3.5
scroll-margin-inline-end: 0.875rem; /* 14px */
scroll-mt-3.5
scroll-margin-top: 0.875rem; /* 14px */
scroll-mr-3.5
scroll-margin-right: 0.875rem; /* 14px */
scroll-mb-3.5
scroll-margin-bottom: 0.875rem; /* 14px */
scroll-ml-3.5
scroll-margin-left: 0.875rem; /* 14px */
scroll-m-4
scroll-margin: 1rem; /* 16px */
scroll-mx-4
scroll-margin-left: 1rem; /* 16px */ scroll-margin-right: 1rem; /* 16px */
scroll-my-4
scroll-margin-top: 1rem; /* 16px */ scroll-margin-bottom: 1rem; /* 16px */
scroll-ms-4
scroll-margin-inline-start: 1rem; /* 16px */
scroll-me-4
scroll-margin-inline-end: 1rem; /* 16px */
scroll-mt-4
scroll-margin-top: 1rem; /* 16px */
scroll-mr-4
scroll-margin-right: 1rem; /* 16px */
scroll-mb-4
scroll-margin-bottom: 1rem; /* 16px */
scroll-ml-4
scroll-margin-left: 1rem; /* 16px */
scroll-m-5
scroll-margin: 1.25rem; /* 20px */
scroll-mx-5
scroll-margin-left: 1.25rem; /* 20px */ scroll-margin-right: 1.25rem; /* 20px */
scroll-my-5
scroll-margin-top: 1.25rem; /* 20px */ scroll-margin-bottom: 1.25rem; /* 20px */
scroll-ms-5
scroll-margin-inline-start: 1.25rem; /* 20px */
scroll-me-5
scroll-margin-inline-end: 1.25rem; /* 20px */
scroll-mt-5
scroll-margin-top: 1.25rem; /* 20px */
scroll-mr-5
scroll-margin-right: 1.25rem; /* 20px */
scroll-mb-5
scroll-margin-bottom: 1.25rem; /* 20px */
scroll-ml-5
scroll-margin-left: 1.25rem; /* 20px */
scroll-m-6
scroll-margin: 1.5rem; /* 24px */
scroll-mx-6
scroll-margin-left: 1.5rem; /* 24px */ scroll-margin-right: 1.5rem; /* 24px */
scroll-my-6
scroll-margin-top: 1.5rem; /* 24px */ scroll-margin-bottom: 1.5rem; /* 24px */
scroll-ms-6
scroll-margin-inline-start: 1.5rem; /* 24px */
scroll-me-6
scroll-margin-inline-end: 1.5rem; /* 24px */
scroll-mt-6
scroll-margin-top: 1.5rem; /* 24px */
scroll-mr-6
scroll-margin-right: 1.5rem; /* 24px */
scroll-mb-6
scroll-margin-bottom: 1.5rem; /* 24px */
scroll-ml-6
scroll-margin-left: 1.5rem; /* 24px */
scroll-m-7
scroll-margin: 1.75rem; /* 28px */
scroll-mx-7
scroll-margin-left: 1.75rem; /* 28px */ scroll-margin-right: 1.75rem; /* 28px */
scroll-my-7
scroll-margin-top: 1.75rem; /* 28px */ scroll-margin-bottom: 1.75rem; /* 28px */
scroll-ms-7
scroll-margin-inline-start: 1.75rem; /* 28px */
scroll-me-7
scroll-margin-inline-end: 1.75rem; /* 28px */
scroll-mt-7
scroll-margin-top: 1.75rem; /* 28px */
scroll-mr-7
scroll-margin-right: 1.75rem; /* 28px */
scroll-mb-7
scroll-margin-bottom: 1.75rem; /* 28px */
scroll-ml-7
scroll-margin-left: 1.75rem; /* 28px */
scroll-m-8
scroll-margin: 2rem; /* 32px */
scroll-mx-8
scroll-margin-left: 2rem; /* 32px */ scroll-margin-right: 2rem; /* 32px */
scroll-my-8
scroll-margin-top: 2rem; /* 32px */ scroll-margin-bottom: 2rem; /* 32px */
scroll-ms-8
scroll-margin-inline-start: 2rem; /* 32px */
scroll-me-8
scroll-margin-inline-end: 2rem; /* 32px */
scroll-mt-8
scroll-margin-top: 2rem; /* 32px */
scroll-mr-8
scroll-margin-right: 2rem; /* 32px */
scroll-mb-8
scroll-margin-bottom: 2rem; /* 32px */
scroll-ml-8
scroll-margin-left: 2rem; /* 32px */
scroll-m-9
scroll-margin: 2.25rem; /* 36px */
scroll-mx-9
scroll-margin-left: 2.25rem; /* 36px */ scroll-margin-right: 2.25rem; /* 36px */
scroll-my-9
scroll-margin-top: 2.25rem; /* 36px */ scroll-margin-bottom: 2.25rem; /* 36px */
scroll-ms-9
scroll-margin-inline-start: 2.25rem; /* 36px */
scroll-me-9
scroll-margin-inline-end: 2.25rem; /* 36px */
scroll-mt-9
scroll-margin-top: 2.25rem; /* 36px */
scroll-mr-9
scroll-margin-right: 2.25rem; /* 36px */
scroll-mb-9
scroll-margin-bottom: 2.25rem; /* 36px */
scroll-ml-9
scroll-margin-left: 2.25rem; /* 36px */
scroll-m-10
scroll-margin: 2.5rem; /* 40px */
scroll-mx-10
scroll-margin-left: 2.5rem; /* 40px */ scroll-margin-right: 2.5rem; /* 40px */
scroll-my-10
scroll-margin-top: 2.5rem; /* 40px */ scroll-margin-bottom: 2.5rem; /* 40px */
scroll-ms-10
scroll-margin-inline-start: 2.5rem; /* 40px */
scroll-me-10
scroll-margin-inline-end: 2.5rem; /* 40px */
scroll-mt-10
scroll-margin-top: 2.5rem; /* 40px */
scroll-mr-10
scroll-margin-right: 2.5rem; /* 40px */
scroll-mb-10
scroll-margin-bottom: 2.5rem; /* 40px */
scroll-ml-10
scroll-margin-left: 2.5rem; /* 40px */
scroll-m-11
scroll-margin: 2.75rem; /* 44px */
scroll-mx-11
scroll-margin-left: 2.75rem; /* 44px */ scroll-margin-right: 2.75rem; /* 44px */
scroll-my-11
scroll-margin-top: 2.75rem; /* 44px */ scroll-margin-bottom: 2.75rem; /* 44px */
scroll-ms-11
scroll-margin-inline-start: 2.75rem; /* 44px */
scroll-me-11
scroll-margin-inline-end: 2.75rem; /* 44px */
scroll-mt-11
scroll-margin-top: 2.75rem; /* 44px */
scroll-mr-11
scroll-margin-right: 2.75rem; /* 44px */
scroll-mb-11
scroll-margin-bottom: 2.75rem; /* 44px */
scroll-ml-11
scroll-margin-left: 2.75rem; /* 44px */
scroll-m-12
scroll-margin: 3rem; /* 48px */
scroll-mx-12
scroll-margin-left: 3rem; /* 48px */ scroll-margin-right: 3rem; /* 48px */
scroll-my-12
scroll-margin-top: 3rem; /* 48px */ scroll-margin-bottom: 3rem; /* 48px */
scroll-ms-12
scroll-margin-inline-start: 3rem; /* 48px */
scroll-me-12
scroll-margin-inline-end: 3rem; /* 48px */
scroll-mt-12
scroll-margin-top: 3rem; /* 48px */
scroll-mr-12
scroll-margin-right: 3rem; /* 48px */
scroll-mb-12
scroll-margin-bottom: 3rem; /* 48px */
scroll-ml-12
scroll-margin-left: 3rem; /* 48px */
scroll-m-14
scroll-margin: 3.5rem; /* 56px */
scroll-mx-14
scroll-margin-left: 3.5rem; /* 56px */ scroll-margin-right: 3.5rem; /* 56px */
scroll-my-14
scroll-margin-top: 3.5rem; /* 56px */ scroll-margin-bottom: 3.5rem; /* 56px */
scroll-ms-14
scroll-margin-inline-start: 3.5rem; /* 56px */
scroll-me-14
scroll-margin-inline-end: 3.5rem; /* 56px */
scroll-mt-14
scroll-margin-top: 3.5rem; /* 56px */
scroll-mr-14
scroll-margin-right: 3.5rem; /* 56px */
scroll-mb-14
scroll-margin-bottom: 3.5rem; /* 56px */
scroll-ml-14
scroll-margin-left: 3.5rem; /* 56px */
scroll-m-16
scroll-margin: 4rem; /* 64px */
scroll-mx-16
scroll-margin-left: 4rem; /* 64px */ scroll-margin-right: 4rem; /* 64px */
scroll-my-16
scroll-margin-top: 4rem; /* 64px */ scroll-margin-bottom: 4rem; /* 64px */
scroll-ms-16
scroll-margin-inline-start: 4rem; /* 64px */
scroll-me-16
scroll-margin-inline-end: 4rem; /* 64px */
scroll-mt-16
scroll-margin-top: 4rem; /* 64px */
scroll-mr-16
scroll-margin-right: 4rem; /* 64px */
scroll-mb-16
scroll-margin-bottom: 4rem; /* 64px */
scroll-ml-16
scroll-margin-left: 4rem; /* 64px */
scroll-m-20
scroll-margin: 5rem; /* 80px */
scroll-mx-20
scroll-margin-left: 5rem; /* 80px */ scroll-margin-right: 5rem; /* 80px */
scroll-my-20
scroll-margin-top: 5rem; /* 80px */ scroll-margin-bottom: 5rem; /* 80px */
scroll-ms-20
scroll-margin-inline-start: 5rem; /* 80px */
scroll-me-20
scroll-margin-inline-end: 5rem; /* 80px */
scroll-mt-20
scroll-margin-top: 5rem; /* 80px */
scroll-mr-20
scroll-margin-right: 5rem; /* 80px */
scroll-mb-20
scroll-margin-bottom: 5rem; /* 80px */
scroll-ml-20
scroll-margin-left: 5rem; /* 80px */
scroll-m-24
scroll-margin: 6rem; /* 96px */
scroll-mx-24
scroll-margin-left: 6rem; /* 96px */ scroll-margin-right: 6rem; /* 96px */
scroll-my-24
scroll-margin-top: 6rem; /* 96px */ scroll-margin-bottom: 6rem; /* 96px */
scroll-ms-24
scroll-margin-inline-start: 6rem; /* 96px */
scroll-me-24
scroll-margin-inline-end: 6rem; /* 96px */
scroll-mt-24
scroll-margin-top: 6rem; /* 96px */
scroll-mr-24
scroll-margin-right: 6rem; /* 96px */
scroll-mb-24
scroll-margin-bottom: 6rem; /* 96px */
scroll-ml-24
scroll-margin-left: 6rem; /* 96px */
scroll-m-28
scroll-margin: 7rem; /* 112px */
scroll-mx-28
scroll-margin-left: 7rem; /* 112px */ scroll-margin-right: 7rem; /* 112px */
scroll-my-28
scroll-margin-top: 7rem; /* 112px */ scroll-margin-bottom: 7rem; /* 112px */
scroll-ms-28
scroll-margin-inline-start: 7rem; /* 112px */
scroll-me-28
scroll-margin-inline-end: 7rem; /* 112px */
scroll-mt-28
scroll-margin-top: 7rem; /* 112px */
scroll-mr-28
scroll-margin-right: 7rem; /* 112px */
scroll-mb-28
scroll-margin-bottom: 7rem; /* 112px */
scroll-ml-28
scroll-margin-left: 7rem; /* 112px */
scroll-m-32
scroll-margin: 8rem; /* 128px */
scroll-mx-32
scroll-margin-left: 8rem; /* 128px */ scroll-margin-right: 8rem; /* 128px */
scroll-my-32
scroll-margin-top: 8rem; /* 128px */ scroll-margin-bottom: 8rem; /* 128px */
scroll-ms-32
scroll-margin-inline-start: 8rem; /* 128px */
scroll-me-32
scroll-margin-inline-end: 8rem; /* 128px */
scroll-mt-32
scroll-margin-top: 8rem; /* 128px */
scroll-mr-32
scroll-margin-right: 8rem; /* 128px */
scroll-mb-32
scroll-margin-bottom: 8rem; /* 128px */
scroll-ml-32
scroll-margin-left: 8rem; /* 128px */
scroll-m-36
scroll-margin: 9rem; /* 144px */
scroll-mx-36
scroll-margin-left: 9rem; /* 144px */ scroll-margin-right: 9rem; /* 144px */
scroll-my-36
scroll-margin-top: 9rem; /* 144px */ scroll-margin-bottom: 9rem; /* 144px */
scroll-ms-36
scroll-margin-inline-start: 9rem; /* 144px */
scroll-me-36
scroll-margin-inline-end: 9rem; /* 144px */
scroll-mt-36
scroll-margin-top: 9rem; /* 144px */
scroll-mr-36
scroll-margin-right: 9rem; /* 144px */
scroll-mb-36
scroll-margin-bottom: 9rem; /* 144px */
scroll-ml-36
scroll-margin-left: 9rem; /* 144px */
scroll-m-40
scroll-margin: 10rem; /* 160px */
scroll-mx-40
scroll-margin-left: 10rem; /* 160px */ scroll-margin-right: 10rem; /* 160px */
scroll-my-40
scroll-margin-top: 10rem; /* 160px */ scroll-margin-bottom: 10rem; /* 160px */
scroll-ms-40
scroll-margin-inline-start: 10rem; /* 160px */
scroll-me-40
scroll-margin-inline-end: 10rem; /* 160px */
scroll-mt-40
scroll-margin-top: 10rem; /* 160px */
scroll-mr-40
scroll-margin-right: 10rem; /* 160px */
scroll-mb-40
scroll-margin-bottom: 10rem; /* 160px */
scroll-ml-40
scroll-margin-left: 10rem; /* 160px */
scroll-m-44
scroll-margin: 11rem; /* 176px */
scroll-mx-44
scroll-margin-left: 11rem; /* 176px */ scroll-margin-right: 11rem; /* 176px */
scroll-my-44
scroll-margin-top: 11rem; /* 176px */ scroll-margin-bottom: 11rem; /* 176px */
scroll-ms-44
scroll-margin-inline-start: 11rem; /* 176px */
scroll-me-44
scroll-margin-inline-end: 11rem; /* 176px */
scroll-mt-44
scroll-margin-top: 11rem; /* 176px */
scroll-mr-44
scroll-margin-right: 11rem; /* 176px */
scroll-mb-44
scroll-margin-bottom: 11rem; /* 176px */
scroll-ml-44
scroll-margin-left: 11rem; /* 176px */
scroll-m-48
scroll-margin: 12rem; /* 192px */
scroll-mx-48
scroll-margin-left: 12rem; /* 192px */ scroll-margin-right: 12rem; /* 192px */
scroll-my-48
scroll-margin-top: 12rem; /* 192px */ scroll-margin-bottom: 12rem; /* 192px */
scroll-ms-48
scroll-margin-inline-start: 12rem; /* 192px */
scroll-me-48
scroll-margin-inline-end: 12rem; /* 192px */
scroll-mt-48
scroll-margin-top: 12rem; /* 192px */
scroll-mr-48
scroll-margin-right: 12rem; /* 192px */
scroll-mb-48
scroll-margin-bottom: 12rem; /* 192px */
scroll-ml-48
scroll-margin-left: 12rem; /* 192px */
scroll-m-52
scroll-margin: 13rem; /* 208px */
scroll-mx-52
scroll-margin-left: 13rem; /* 208px */ scroll-margin-right: 13rem; /* 208px */
scroll-my-52
scroll-margin-top: 13rem; /* 208px */ scroll-margin-bottom: 13rem; /* 208px */
scroll-ms-52
scroll-margin-inline-start: 13rem; /* 208px */
scroll-me-52
scroll-margin-inline-end: 13rem; /* 208px */
scroll-mt-52
scroll-margin-top: 13rem; /* 208px */
scroll-mr-52
scroll-margin-right: 13rem; /* 208px */
scroll-mb-52
scroll-margin-bottom: 13rem; /* 208px */
scroll-ml-52
scroll-margin-left: 13rem; /* 208px */
scroll-m-56
scroll-margin: 14rem; /* 224px */
scroll-mx-56
scroll-margin-left: 14rem; /* 224px */ scroll-margin-right: 14rem; /* 224px */
scroll-my-56
scroll-margin-top: 14rem; /* 224px */ scroll-margin-bottom: 14rem; /* 224px */
scroll-ms-56
scroll-margin-inline-start: 14rem; /* 224px */
scroll-me-56
scroll-margin-inline-end: 14rem; /* 224px */
scroll-mt-56
scroll-margin-top: 14rem; /* 224px */
scroll-mr-56
scroll-margin-right: 14rem; /* 224px */
scroll-mb-56
scroll-margin-bottom: 14rem; /* 224px */
scroll-ml-56
scroll-margin-left: 14rem; /* 224px */
scroll-m-60
scroll-margin: 15rem; /* 240px */
scroll-mx-60
scroll-margin-left: 15rem; /* 240px */ scroll-margin-right: 15rem; /* 240px */
scroll-my-60
scroll-margin-top: 15rem; /* 240px */ scroll-margin-bottom: 15rem; /* 240px */
scroll-ms-60
scroll-margin-inline-start: 15rem; /* 240px */
scroll-me-60
scroll-margin-inline-end: 15rem; /* 240px */
scroll-mt-60
scroll-margin-top: 15rem; /* 240px */
scroll-mr-60
scroll-margin-right: 15rem; /* 240px */
scroll-mb-60
scroll-margin-bottom: 15rem; /* 240px */
scroll-ml-60
scroll-margin-left: 15rem; /* 240px */
scroll-m-64
scroll-margin: 16rem; /* 256px */
scroll-mx-64
scroll-margin-left: 16rem; /* 256px */ scroll-margin-right: 16rem; /* 256px */
scroll-my-64
scroll-margin-top: 16rem; /* 256px */ scroll-margin-bottom: 16rem; /* 256px */
scroll-ms-64
scroll-margin-inline-start: 16rem; /* 256px */
scroll-me-64
scroll-margin-inline-end: 16rem; /* 256px */
scroll-mt-64
scroll-margin-top: 16rem; /* 256px */
scroll-mr-64
scroll-margin-right: 16rem; /* 256px */
scroll-mb-64
scroll-margin-bottom: 16rem; /* 256px */
scroll-ml-64
scroll-margin-left: 16rem; /* 256px */
scroll-m-72
scroll-margin: 18rem; /* 288px */
scroll-mx-72
scroll-margin-left: 18rem; /* 288px */ scroll-margin-right: 18rem; /* 288px */
scroll-my-72
scroll-margin-top: 18rem; /* 288px */ scroll-margin-bottom: 18rem; /* 288px */
scroll-ms-72
scroll-margin-inline-start: 18rem; /* 288px */
scroll-me-72
scroll-margin-inline-end: 18rem; /* 288px */
scroll-mt-72
scroll-margin-top: 18rem; /* 288px */
scroll-mr-72
scroll-margin-right: 18rem; /* 288px */
scroll-mb-72
scroll-margin-bottom: 18rem; /* 288px */
scroll-ml-72
scroll-margin-left: 18rem; /* 288px */
scroll-m-80
scroll-margin: 20rem; /* 320px */
scroll-mx-80
scroll-margin-left: 20rem; /* 320px */ scroll-margin-right: 20rem; /* 320px */
scroll-my-80
scroll-margin-top: 20rem; /* 320px */ scroll-margin-bottom: 20rem; /* 320px */
scroll-ms-80
scroll-margin-inline-start: 20rem; /* 320px */
scroll-me-80
scroll-margin-inline-end: 20rem; /* 320px */
scroll-mt-80
scroll-margin-top: 20rem; /* 320px */
scroll-mr-80
scroll-margin-right: 20rem; /* 320px */
scroll-mb-80
scroll-margin-bottom: 20rem; /* 320px */
scroll-ml-80
scroll-margin-left: 20rem; /* 320px */
scroll-m-96
scroll-margin: 24rem; /* 384px */
scroll-mx-96
scroll-margin-left: 24rem; /* 384px */ scroll-margin-right: 24rem; /* 384px */
scroll-my-96
scroll-margin-top: 24rem; /* 384px */ scroll-margin-bottom: 24rem; /* 384px */
scroll-ms-96
scroll-margin-inline-start: 24rem; /* 384px */
scroll-me-96
scroll-margin-inline-end: 24rem; /* 384px */
scroll-mt-96
scroll-margin-top: 24rem; /* 384px */
scroll-mr-96
scroll-margin-right: 24rem; /* 384px */
scroll-mb-96
scroll-margin-bottom: 24rem; /* 384px */
scroll-ml-96
scroll-margin-left: 24rem; /* 384px */

Scroll Padding

Class
Properties
scroll-p-0
scroll-padding: 0px;
scroll-px-0
scroll-padding-left: 0px; scroll-padding-right: 0px;
scroll-py-0
scroll-padding-top: 0px; scroll-padding-bottom: 0px;
scroll-ps-0
scroll-padding-inline-start: 0px;
scroll-pe-0
scroll-padding-inline-end: 0px;
scroll-pt-0
scroll-padding-top: 0px;
scroll-pr-0
scroll-padding-right: 0px;
scroll-pb-0
scroll-padding-bottom: 0px;
scroll-pl-0
scroll-padding-left: 0px;
scroll-p-px
scroll-padding: 1px;
scroll-px-px
scroll-padding-left: 1px; scroll-padding-right: 1px;
scroll-py-px
scroll-padding-top: 1px; scroll-padding-bottom: 1px;
scroll-ps-px
scroll-padding-inline-start: 1px;
scroll-pe-px
scroll-padding-inline-end: 1px;
scroll-pt-px
scroll-padding-top: 1px;
scroll-pr-px
scroll-padding-right: 1px;
scroll-pb-px
scroll-padding-bottom: 1px;
scroll-pl-px
scroll-padding-left: 1px;
scroll-p-0.5
scroll-padding: 0.125rem; /* 2px */
scroll-px-0.5
scroll-padding-left: 0.125rem; /* 2px */ scroll-padding-right: 0.125rem; /* 2px */
scroll-py-0.5
scroll-padding-top: 0.125rem; /* 2px */ scroll-padding-bottom: 0.125rem; /* 2px */
scroll-ps-0.5
scroll-padding-inline-start: 0.125rem; /* 2px */
scroll-pe-0.5
scroll-padding-inline-end: 0.125rem; /* 2px */
scroll-pt-0.5
scroll-padding-top: 0.125rem; /* 2px */
scroll-pr-0.5
scroll-padding-right: 0.125rem; /* 2px */
scroll-pb-0.5
scroll-padding-bottom: 0.125rem; /* 2px */
scroll-pl-0.5
scroll-padding-left: 0.125rem; /* 2px */
scroll-p-1
scroll-padding: 0.25rem; /* 4px */
scroll-px-1
scroll-padding-left: 0.25rem; /* 4px */ scroll-padding-right: 0.25rem; /* 4px */
scroll-py-1
scroll-padding-top: 0.25rem; /* 4px */ scroll-padding-bottom: 0.25rem; /* 4px */
scroll-ps-1
scroll-padding-inline-start: 0.25rem; /* 4px */
scroll-pe-1
scroll-padding-inline-end: 0.25rem; /* 4px */
scroll-pt-1
scroll-padding-top: 0.25rem; /* 4px */
scroll-pr-1
scroll-padding-right: 0.25rem; /* 4px */
scroll-pb-1
scroll-padding-bottom: 0.25rem; /* 4px */
scroll-pl-1
scroll-padding-left: 0.25rem; /* 4px */
scroll-p-1.5
scroll-padding: 0.375rem; /* 6px */
scroll-px-1.5
scroll-padding-left: 0.375rem; /* 6px */ scroll-padding-right: 0.375rem; /* 6px */
scroll-py-1.5
scroll-padding-top: 0.375rem; /* 6px */ scroll-padding-bottom: 0.375rem; /* 6px */
scroll-ps-1.5
scroll-padding-inline-start: 0.375rem; /* 6px */
scroll-pe-1.5
scroll-padding-inline-end: 0.375rem; /* 6px */
scroll-pt-1.5
scroll-padding-top: 0.375rem; /* 6px */
scroll-pr-1.5
scroll-padding-right: 0.375rem; /* 6px */
scroll-pb-1.5
scroll-padding-bottom: 0.375rem; /* 6px */
scroll-pl-1.5
scroll-padding-left: 0.375rem; /* 6px */
scroll-p-2
scroll-padding: 0.5rem; /* 8px */
scroll-px-2
scroll-padding-left: 0.5rem; /* 8px */ scroll-padding-right: 0.5rem; /* 8px */
scroll-py-2
scroll-padding-top: 0.5rem; /* 8px */ scroll-padding-bottom: 0.5rem; /* 8px */
scroll-ps-2
scroll-padding-inline-start: 0.5rem; /* 8px */
scroll-pe-2
scroll-padding-inline-end: 0.5rem; /* 8px */
scroll-pt-2
scroll-padding-top: 0.5rem; /* 8px */
scroll-pr-2
scroll-padding-right: 0.5rem; /* 8px */
scroll-pb-2
scroll-padding-bottom: 0.5rem; /* 8px */
scroll-pl-2
scroll-padding-left: 0.5rem; /* 8px */
scroll-p-2.5
scroll-padding: 0.625rem; /* 10px */
scroll-px-2.5
scroll-padding-left: 0.625rem; /* 10px */ scroll-padding-right: 0.625rem; /* 10px */
scroll-py-2.5
scroll-padding-top: 0.625rem; /* 10px */ scroll-padding-bottom: 0.625rem; /* 10px */
scroll-ps-2.5
scroll-padding-inline-start: 0.625rem; /* 10px */
scroll-pe-2.5
scroll-padding-inline-end: 0.625rem; /* 10px */
scroll-pt-2.5
scroll-padding-top: 0.625rem; /* 10px */
scroll-pr-2.5
scroll-padding-right: 0.625rem; /* 10px */
scroll-pb-2.5
scroll-padding-bottom: 0.625rem; /* 10px */
scroll-pl-2.5
scroll-padding-left: 0.625rem; /* 10px */
scroll-p-3
scroll-padding: 0.75rem; /* 12px */
scroll-px-3
scroll-padding-left: 0.75rem; /* 12px */ scroll-padding-right: 0.75rem; /* 12px */
scroll-py-3
scroll-padding-top: 0.75rem; /* 12px */ scroll-padding-bottom: 0.75rem; /* 12px */
scroll-ps-3
scroll-padding-inline-start: 0.75rem; /* 12px */
scroll-pe-3
scroll-padding-inline-end: 0.75rem; /* 12px */
scroll-pt-3
scroll-padding-top: 0.75rem; /* 12px */
scroll-pr-3
scroll-padding-right: 0.75rem; /* 12px */
scroll-pb-3
scroll-padding-bottom: 0.75rem; /* 12px */
scroll-pl-3
scroll-padding-left: 0.75rem; /* 12px */
scroll-p-3.5
scroll-padding: 0.875rem; /* 14px */
scroll-px-3.5
scroll-padding-left: 0.875rem; /* 14px */ scroll-padding-right: 0.875rem; /* 14px */
scroll-py-3.5
scroll-padding-top: 0.875rem; /* 14px */ scroll-padding-bottom: 0.875rem; /* 14px */
scroll-ps-3.5
scroll-padding-inline-start: 0.875rem; /* 14px */
scroll-pe-3.5
scroll-padding-inline-end: 0.875rem; /* 14px */
scroll-pt-3.5
scroll-padding-top: 0.875rem; /* 14px */
scroll-pr-3.5
scroll-padding-right: 0.875rem; /* 14px */
scroll-pb-3.5
scroll-padding-bottom: 0.875rem; /* 14px */
scroll-pl-3.5
scroll-padding-left: 0.875rem; /* 14px */
scroll-p-4
scroll-padding: 1rem; /* 16px */
scroll-px-4
scroll-padding-left: 1rem; /* 16px */ scroll-padding-right: 1rem; /* 16px */
scroll-py-4
scroll-padding-top: 1rem; /* 16px */ scroll-padding-bottom: 1rem; /* 16px */
scroll-ps-4
scroll-padding-inline-start: 1rem; /* 16px */
scroll-pe-4
scroll-padding-inline-end: 1rem; /* 16px */
scroll-pt-4
scroll-padding-top: 1rem; /* 16px */
scroll-pr-4
scroll-padding-right: 1rem; /* 16px */
scroll-pb-4
scroll-padding-bottom: 1rem; /* 16px */
scroll-pl-4
scroll-padding-left: 1rem; /* 16px */
scroll-p-5
scroll-padding: 1.25rem; /* 20px */
scroll-px-5
scroll-padding-left: 1.25rem; /* 20px */ scroll-padding-right: 1.25rem; /* 20px */
scroll-py-5
scroll-padding-top: 1.25rem; /* 20px */ scroll-padding-bottom: 1.25rem; /* 20px */
scroll-ps-5
scroll-padding-inline-start: 1.25rem; /* 20px */
scroll-pe-5
scroll-padding-inline-end: 1.25rem; /* 20px */
scroll-pt-5
scroll-padding-top: 1.25rem; /* 20px */
scroll-pr-5
scroll-padding-right: 1.25rem; /* 20px */
scroll-pb-5
scroll-padding-bottom: 1.25rem; /* 20px */
scroll-pl-5
scroll-padding-left: 1.25rem; /* 20px */
scroll-p-6
scroll-padding: 1.5rem; /* 24px */
scroll-px-6
scroll-padding-left: 1.5rem; /* 24px */ scroll-padding-right: 1.5rem; /* 24px */
scroll-py-6
scroll-padding-top: 1.5rem; /* 24px */ scroll-padding-bottom: 1.5rem; /* 24px */
scroll-ps-6
scroll-padding-inline-start: 1.5rem; /* 24px */
scroll-pe-6
scroll-padding-inline-end: 1.5rem; /* 24px */
scroll-pt-6
scroll-padding-top: 1.5rem; /* 24px */
scroll-pr-6
scroll-padding-right: 1.5rem; /* 24px */
scroll-pb-6
scroll-padding-bottom: 1.5rem; /* 24px */
scroll-pl-6
scroll-padding-left: 1.5rem; /* 24px */
scroll-p-7
scroll-padding: 1.75rem; /* 28px */
scroll-px-7
scroll-padding-left: 1.75rem; /* 28px */ scroll-padding-right: 1.75rem; /* 28px */
scroll-py-7
scroll-padding-top: 1.75rem; /* 28px */ scroll-padding-bottom: 1.75rem; /* 28px */
scroll-ps-7
scroll-padding-inline-start: 1.75rem; /* 28px */
scroll-pe-7
scroll-padding-inline-end: 1.75rem; /* 28px */
scroll-pt-7
scroll-padding-top: 1.75rem; /* 28px */
scroll-pr-7
scroll-padding-right: 1.75rem; /* 28px */
scroll-pb-7
scroll-padding-bottom: 1.75rem; /* 28px */
scroll-pl-7
scroll-padding-left: 1.75rem; /* 28px */
scroll-p-8
scroll-padding: 2rem; /* 32px */
scroll-px-8
scroll-padding-left: 2rem; /* 32px */ scroll-padding-right: 2rem; /* 32px */
scroll-py-8
scroll-padding-top: 2rem; /* 32px */ scroll-padding-bottom: 2rem; /* 32px */
scroll-ps-8
scroll-padding-inline-start: 2rem; /* 32px */
scroll-pe-8
scroll-padding-inline-end: 2rem; /* 32px */
scroll-pt-8
scroll-padding-top: 2rem; /* 32px */
scroll-pr-8
scroll-padding-right: 2rem; /* 32px */
scroll-pb-8
scroll-padding-bottom: 2rem; /* 32px */
scroll-pl-8
scroll-padding-left: 2rem; /* 32px */
scroll-p-9
scroll-padding: 2.25rem; /* 36px */
scroll-px-9
scroll-padding-left: 2.25rem; /* 36px */ scroll-padding-right: 2.25rem; /* 36px */
scroll-py-9
scroll-padding-top: 2.25rem; /* 36px */ scroll-padding-bottom: 2.25rem; /* 36px */
scroll-ps-9
scroll-padding-inline-start: 2.25rem; /* 36px */
scroll-pe-9
scroll-padding-inline-end: 2.25rem; /* 36px */
scroll-pt-9
scroll-padding-top: 2.25rem; /* 36px */
scroll-pr-9
scroll-padding-right: 2.25rem; /* 36px */
scroll-pb-9
scroll-padding-bottom: 2.25rem; /* 36px */
scroll-pl-9
scroll-padding-left: 2.25rem; /* 36px */
scroll-p-10
scroll-padding: 2.5rem; /* 40px */
scroll-px-10
scroll-padding-left: 2.5rem; /* 40px */ scroll-padding-right: 2.5rem; /* 40px */
scroll-py-10
scroll-padding-top: 2.5rem; /* 40px */ scroll-padding-bottom: 2.5rem; /* 40px */
scroll-ps-10
scroll-padding-inline-start: 2.5rem; /* 40px */
scroll-pe-10
scroll-padding-inline-end: 2.5rem; /* 40px */
scroll-pt-10
scroll-padding-top: 2.5rem; /* 40px */
scroll-pr-10
scroll-padding-right: 2.5rem; /* 40px */
scroll-pb-10
scroll-padding-bottom: 2.5rem; /* 40px */
scroll-pl-10
scroll-padding-left: 2.5rem; /* 40px */
scroll-p-11
scroll-padding: 2.75rem; /* 44px */
scroll-px-11
scroll-padding-left: 2.75rem; /* 44px */ scroll-padding-right: 2.75rem; /* 44px */
scroll-py-11
scroll-padding-top: 2.75rem; /* 44px */ scroll-padding-bottom: 2.75rem; /* 44px */
scroll-ps-11
scroll-padding-inline-start: 2.75rem; /* 44px */
scroll-pe-11
scroll-padding-inline-end: 2.75rem; /* 44px */
scroll-pt-11
scroll-padding-top: 2.75rem; /* 44px */
scroll-pr-11
scroll-padding-right: 2.75rem; /* 44px */
scroll-pb-11
scroll-padding-bottom: 2.75rem; /* 44px */
scroll-pl-11
scroll-padding-left: 2.75rem; /* 44px */
scroll-p-12
scroll-padding: 3rem; /* 48px */
scroll-px-12
scroll-padding-left: 3rem; /* 48px */ scroll-padding-right: 3rem; /* 48px */
scroll-py-12
scroll-padding-top: 3rem; /* 48px */ scroll-padding-bottom: 3rem; /* 48px */
scroll-ps-12
scroll-padding-inline-start: 3rem; /* 48px */
scroll-pe-12
scroll-padding-inline-end: 3rem; /* 48px */
scroll-pt-12
scroll-padding-top: 3rem; /* 48px */
scroll-pr-12
scroll-padding-right: 3rem; /* 48px */
scroll-pb-12
scroll-padding-bottom: 3rem; /* 48px */
scroll-pl-12
scroll-padding-left: 3rem; /* 48px */
scroll-p-14
scroll-padding: 3.5rem; /* 56px */
scroll-px-14
scroll-padding-left: 3.5rem; /* 56px */ scroll-padding-right: 3.5rem; /* 56px */
scroll-py-14
scroll-padding-top: 3.5rem; /* 56px */ scroll-padding-bottom: 3.5rem; /* 56px */
scroll-ps-14
scroll-padding-inline-start: 3.5rem; /* 56px */
scroll-pe-14
scroll-padding-inline-end: 3.5rem; /* 56px */
scroll-pt-14
scroll-padding-top: 3.5rem; /* 56px */
scroll-pr-14
scroll-padding-right: 3.5rem; /* 56px */
scroll-pb-14
scroll-padding-bottom: 3.5rem; /* 56px */
scroll-pl-14
scroll-padding-left: 3.5rem; /* 56px */
scroll-p-16
scroll-padding: 4rem; /* 64px */
scroll-px-16
scroll-padding-left: 4rem; /* 64px */ scroll-padding-right: 4rem; /* 64px */
scroll-py-16
scroll-padding-top: 4rem; /* 64px */ scroll-padding-bottom: 4rem; /* 64px */
scroll-ps-16
scroll-padding-inline-start: 4rem; /* 64px */
scroll-pe-16
scroll-padding-inline-end: 4rem; /* 64px */
scroll-pt-16
scroll-padding-top: 4rem; /* 64px */
scroll-pr-16
scroll-padding-right: 4rem; /* 64px */
scroll-pb-16
scroll-padding-bottom: 4rem; /* 64px */
scroll-pl-16
scroll-padding-left: 4rem; /* 64px */
scroll-p-20
scroll-padding: 5rem; /* 80px */
scroll-px-20
scroll-padding-left: 5rem; /* 80px */ scroll-padding-right: 5rem; /* 80px */
scroll-py-20
scroll-padding-top: 5rem; /* 80px */ scroll-padding-bottom: 5rem; /* 80px */
scroll-ps-20
scroll-padding-inline-start: 5rem; /* 80px */
scroll-pe-20
scroll-padding-inline-end: 5rem; /* 80px */
scroll-pt-20
scroll-padding-top: 5rem; /* 80px */
scroll-pr-20
scroll-padding-right: 5rem; /* 80px */
scroll-pb-20
scroll-padding-bottom: 5rem; /* 80px */
scroll-pl-20
scroll-padding-left: 5rem; /* 80px */
scroll-p-24
scroll-padding: 6rem; /* 96px */
scroll-px-24
scroll-padding-left: 6rem; /* 96px */ scroll-padding-right: 6rem; /* 96px */
scroll-py-24
scroll-padding-top: 6rem; /* 96px */ scroll-padding-bottom: 6rem; /* 96px */
scroll-ps-24
scroll-padding-inline-start: 6rem; /* 96px */
scroll-pe-24
scroll-padding-inline-end: 6rem; /* 96px */
scroll-pt-24
scroll-padding-top: 6rem; /* 96px */
scroll-pr-24
scroll-padding-right: 6rem; /* 96px */
scroll-pb-24
scroll-padding-bottom: 6rem; /* 96px */
scroll-pl-24
scroll-padding-left: 6rem; /* 96px */
scroll-p-28
scroll-padding: 7rem; /* 112px */
scroll-px-28
scroll-padding-left: 7rem; /* 112px */ scroll-padding-right: 7rem; /* 112px */
scroll-py-28
scroll-padding-top: 7rem; /* 112px */ scroll-padding-bottom: 7rem; /* 112px */
scroll-ps-28
scroll-padding-inline-start: 7rem; /* 112px */
scroll-pe-28
scroll-padding-inline-end: 7rem; /* 112px */
scroll-pt-28
scroll-padding-top: 7rem; /* 112px */
scroll-pr-28
scroll-padding-right: 7rem; /* 112px */
scroll-pb-28
scroll-padding-bottom: 7rem; /* 112px */
scroll-pl-28
scroll-padding-left: 7rem; /* 112px */
scroll-p-32
scroll-padding: 8rem; /* 128px */
scroll-px-32
scroll-padding-left: 8rem; /* 128px */ scroll-padding-right: 8rem; /* 128px */
scroll-py-32
scroll-padding-top: 8rem; /* 128px */ scroll-padding-bottom: 8rem; /* 128px */
scroll-ps-32
scroll-padding-inline-start: 8rem; /* 128px */
scroll-pe-32
scroll-padding-inline-end: 8rem; /* 128px */
scroll-pt-32
scroll-padding-top: 8rem; /* 128px */
scroll-pr-32
scroll-padding-right: 8rem; /* 128px */
scroll-pb-32
scroll-padding-bottom: 8rem; /* 128px */
scroll-pl-32
scroll-padding-left: 8rem; /* 128px */
scroll-p-36
scroll-padding: 9rem; /* 144px */
scroll-px-36
scroll-padding-left: 9rem; /* 144px */ scroll-padding-right: 9rem; /* 144px */
scroll-py-36
scroll-padding-top: 9rem; /* 144px */ scroll-padding-bottom: 9rem; /* 144px */
scroll-ps-36
scroll-padding-inline-start: 9rem; /* 144px */
scroll-pe-36
scroll-padding-inline-end: 9rem; /* 144px */
scroll-pt-36
scroll-padding-top: 9rem; /* 144px */
scroll-pr-36
scroll-padding-right: 9rem; /* 144px */
scroll-pb-36
scroll-padding-bottom: 9rem; /* 144px */
scroll-pl-36
scroll-padding-left: 9rem; /* 144px */
scroll-p-40
scroll-padding: 10rem; /* 160px */
scroll-px-40
scroll-padding-left: 10rem; /* 160px */ scroll-padding-right: 10rem; /* 160px */
scroll-py-40
scroll-padding-top: 10rem; /* 160px */ scroll-padding-bottom: 10rem; /* 160px */
scroll-ps-40
scroll-padding-inline-start: 10rem; /* 160px */
scroll-pe-40
scroll-padding-inline-end: 10rem; /* 160px */
scroll-pt-40
scroll-padding-top: 10rem; /* 160px */
scroll-pr-40
scroll-padding-right: 10rem; /* 160px */
scroll-pb-40
scroll-padding-bottom: 10rem; /* 160px */
scroll-pl-40
scroll-padding-left: 10rem; /* 160px */
scroll-p-44
scroll-padding: 11rem; /* 176px */
scroll-px-44
scroll-padding-left: 11rem; /* 176px */ scroll-padding-right: 11rem; /* 176px */
scroll-py-44
scroll-padding-top: 11rem; /* 176px */ scroll-padding-bottom: 11rem; /* 176px */
scroll-ps-44
scroll-padding-inline-start: 11rem; /* 176px */
scroll-pe-44
scroll-padding-inline-end: 11rem; /* 176px */
scroll-pt-44
scroll-padding-top: 11rem; /* 176px */
scroll-pr-44
scroll-padding-right: 11rem; /* 176px */
scroll-pb-44
scroll-padding-bottom: 11rem; /* 176px */
scroll-pl-44
scroll-padding-left: 11rem; /* 176px */
scroll-p-48
scroll-padding: 12rem; /* 192px */
scroll-px-48
scroll-padding-left: 12rem; /* 192px */ scroll-padding-right: 12rem; /* 192px */
scroll-py-48
scroll-padding-top: 12rem; /* 192px */ scroll-padding-bottom: 12rem; /* 192px */
scroll-ps-48
scroll-padding-inline-start: 12rem; /* 192px */
scroll-pe-48
scroll-padding-inline-end: 12rem; /* 192px */
scroll-pt-48
scroll-padding-top: 12rem; /* 192px */
scroll-pr-48
scroll-padding-right: 12rem; /* 192px */
scroll-pb-48
scroll-padding-bottom: 12rem; /* 192px */
scroll-pl-48
scroll-padding-left: 12rem; /* 192px */
scroll-p-52
scroll-padding: 13rem; /* 208px */
scroll-px-52
scroll-padding-left: 13rem; /* 208px */ scroll-padding-right: 13rem; /* 208px */
scroll-py-52
scroll-padding-top: 13rem; /* 208px */ scroll-padding-bottom: 13rem; /* 208px */
scroll-ps-52
scroll-padding-inline-start: 13rem; /* 208px */
scroll-pe-52
scroll-padding-inline-end: 13rem; /* 208px */
scroll-pt-52
scroll-padding-top: 13rem; /* 208px */
scroll-pr-52
scroll-padding-right: 13rem; /* 208px */
scroll-pb-52
scroll-padding-bottom: 13rem; /* 208px */
scroll-pl-52
scroll-padding-left: 13rem; /* 208px */
scroll-p-56
scroll-padding: 14rem; /* 224px */
scroll-px-56
scroll-padding-left: 14rem; /* 224px */ scroll-padding-right: 14rem; /* 224px */
scroll-py-56
scroll-padding-top: 14rem; /* 224px */ scroll-padding-bottom: 14rem; /* 224px */
scroll-ps-56
scroll-padding-inline-start: 14rem; /* 224px */
scroll-pe-56
scroll-padding-inline-end: 14rem; /* 224px */
scroll-pt-56
scroll-padding-top: 14rem; /* 224px */
scroll-pr-56
scroll-padding-right: 14rem; /* 224px */
scroll-pb-56
scroll-padding-bottom: 14rem; /* 224px */
scroll-pl-56
scroll-padding-left: 14rem; /* 224px */
scroll-p-60
scroll-padding: 15rem; /* 240px */
scroll-px-60
scroll-padding-left: 15rem; /* 240px */ scroll-padding-right: 15rem; /* 240px */
scroll-py-60
scroll-padding-top: 15rem; /* 240px */ scroll-padding-bottom: 15rem; /* 240px */
scroll-ps-60
scroll-padding-inline-start: 15rem; /* 240px */
scroll-pe-60
scroll-padding-inline-end: 15rem; /* 240px */
scroll-pt-60
scroll-padding-top: 15rem; /* 240px */
scroll-pr-60
scroll-padding-right: 15rem; /* 240px */
scroll-pb-60
scroll-padding-bottom: 15rem; /* 240px */
scroll-pl-60
scroll-padding-left: 15rem; /* 240px */
scroll-p-64
scroll-padding: 16rem; /* 256px */
scroll-px-64
scroll-padding-left: 16rem; /* 256px */ scroll-padding-right: 16rem; /* 256px */
scroll-py-64
scroll-padding-top: 16rem; /* 256px */ scroll-padding-bottom: 16rem; /* 256px */
scroll-ps-64
scroll-padding-inline-start: 16rem; /* 256px */
scroll-pe-64
scroll-padding-inline-end: 16rem; /* 256px */
scroll-pt-64
scroll-padding-top: 16rem; /* 256px */
scroll-pr-64
scroll-padding-right: 16rem; /* 256px */
scroll-pb-64
scroll-padding-bottom: 16rem; /* 256px */
scroll-pl-64
scroll-padding-left: 16rem; /* 256px */
scroll-p-72
scroll-padding: 18rem; /* 288px */
scroll-px-72
scroll-padding-left: 18rem; /* 288px */ scroll-padding-right: 18rem; /* 288px */
scroll-py-72
scroll-padding-top: 18rem; /* 288px */ scroll-padding-bottom: 18rem; /* 288px */
scroll-ps-72
scroll-padding-inline-start: 18rem; /* 288px */
scroll-pe-72
scroll-padding-inline-end: 18rem; /* 288px */
scroll-pt-72
scroll-padding-top: 18rem; /* 288px */
scroll-pr-72
scroll-padding-right: 18rem; /* 288px */
scroll-pb-72
scroll-padding-bottom: 18rem; /* 288px */
scroll-pl-72
scroll-padding-left: 18rem; /* 288px */
scroll-p-80
scroll-padding: 20rem; /* 320px */
scroll-px-80
scroll-padding-left: 20rem; /* 320px */ scroll-padding-right: 20rem; /* 320px */
scroll-py-80
scroll-padding-top: 20rem; /* 320px */ scroll-padding-bottom: 20rem; /* 320px */
scroll-ps-80
scroll-padding-inline-start: 20rem; /* 320px */
scroll-pe-80
scroll-padding-inline-end: 20rem; /* 320px */
scroll-pt-80
scroll-padding-top: 20rem; /* 320px */
scroll-pr-80
scroll-padding-right: 20rem; /* 320px */
scroll-pb-80
scroll-padding-bottom: 20rem; /* 320px */
scroll-pl-80
scroll-padding-left: 20rem; /* 320px */
scroll-p-96
scroll-padding: 24rem; /* 384px */
scroll-px-96
scroll-padding-left: 24rem; /* 384px */ scroll-padding-right: 24rem; /* 384px */
scroll-py-96
scroll-padding-top: 24rem; /* 384px */ scroll-padding-bottom: 24rem; /* 384px */
scroll-ps-96
scroll-padding-inline-start: 24rem; /* 384px */
scroll-pe-96
scroll-padding-inline-end: 24rem; /* 384px */
scroll-pt-96
scroll-padding-top: 24rem; /* 384px */
scroll-pr-96
scroll-padding-right: 24rem; /* 384px */
scroll-pb-96
scroll-padding-bottom: 24rem; /* 384px */
scroll-pl-96
scroll-padding-left: 24rem; /* 384px */

Scroll Snap Align

Class
Properties
snap-start
scroll-snap-align: start;
snap-end
scroll-snap-align: end;
snap-center
scroll-snap-align: center;
snap-align-none
scroll-snap-align: none;

Scroll Snap Stop

Class
Properties
snap-normal
scroll-snap-stop: normal;
snap-always
scroll-snap-stop: always;

Scroll Snap Type

Class
Properties
snap-none
scroll-snap-type: none;
snap-x
scroll-snap-type: x var(--tw-scroll-snap-strictness);
snap-y
scroll-snap-type: y var(--tw-scroll-snap-strictness);
snap-both
scroll-snap-type: both var(--tw-scroll-snap-strictness);
snap-mandatory
--tw-scroll-snap-strictness: mandatory;
snap-proximity
--tw-scroll-snap-strictness: proximity;

Touch Action

Class
Properties
touch-auto
touch-action: auto;
touch-none
touch-action: none;
touch-pan-x
touch-action: pan-x;
touch-pan-left
touch-action: pan-left;
touch-pan-right
touch-action: pan-right;
touch-pan-y
touch-action: pan-y;
touch-pan-up
touch-action: pan-up;
touch-pan-down
touch-action: pan-down;
touch-pinch-zoom
touch-action: pinch-zoom;
touch-manipulation
touch-action: manipulation;

User Select

Class
Properties
select-none
user-select: none;
select-text
user-select: text;
select-all
user-select: all;
select-auto
user-select: auto;

Will Change

Class
Properties
will-change-auto
will-change: auto;
will-change-scroll
will-change: scroll-position;
will-change-contents
will-change: contents;
will-change-transform
will-change: transform;
 
]]> <![CDATA[[tailwindcss] —— Transforms]]> https://blog.hiyb.top/article/15 https://blog.hiyb.top/article/15 Wed, 06 Mar 2024 00:00:00 GMT

Scale

Class
Properties
scale-0
transform: scale(0);
scale-x-0
transform: scaleX(0);
scale-y-0
transform: scaleY(0);
scale-50
transform: scale(.5);
scale-x-50
transform: scaleX(.5);
scale-y-50
transform: scaleY(.5);
scale-75
transform: scale(.75);
scale-x-75
transform: scaleX(.75);
scale-y-75
transform: scaleY(.75);
scale-90
transform: scale(.9);
scale-x-90
transform: scaleX(.9);
scale-y-90
transform: scaleY(.9);
scale-95
transform: scale(.95);
scale-x-95
transform: scaleX(.95);
scale-y-95
transform: scaleY(.95);
scale-100
transform: scale(1);
scale-x-100
transform: scaleX(1);
scale-y-100
transform: scaleY(1);
scale-105
transform: scale(1.05);
scale-x-105
transform: scaleX(1.05);
scale-y-105
transform: scaleY(1.05);
scale-110
transform: scale(1.1);
scale-x-110
transform: scaleX(1.1);
scale-y-110
transform: scaleY(1.1);
scale-125
transform: scale(1.25);
scale-x-125
transform: scaleX(1.25);
scale-y-125
transform: scaleY(1.25);
scale-150
transform: scale(1.5);
scale-x-150
transform: scaleX(1.5);
scale-y-150
transform: scaleY(1.5);

Rotate

Class
Properties
rotate-0
transform: rotate(0deg);
rotate-1
transform: rotate(1deg);
rotate-2
transform: rotate(2deg);
rotate-3
transform: rotate(3deg);
rotate-6
transform: rotate(6deg);
rotate-12
transform: rotate(12deg);
rotate-45
transform: rotate(45deg);
rotate-90
transform: rotate(90deg);
rotate-180
transform: rotate(180deg);

Translate

Class
Properties
translate-x-0
transform: translateX(0px);
translate-y-0
transform: translateY(0px);
translate-x-px
transform: translateX(1px);
translate-y-px
transform: translateY(1px);
translate-x-0.5
transform: translateX(0.125rem);
translate-y-0.5
transform: translateY(0.125rem);
translate-x-1
transform: translateX(0.25rem);
translate-y-1
transform: translateY(0.25rem);
translate-x-1.5
transform: translateX(0.375rem);
translate-y-1.5
transform: translateY(0.375rem);
translate-x-2
transform: translateX(0.5rem);
translate-y-2
transform: translateY(0.5rem);
translate-x-2.5
transform: translateX(0.625rem);
translate-y-2.5
transform: translateY(0.625rem);
translate-x-3
transform: translateX(0.75rem);
translate-y-3
transform: translateY(0.75rem);
translate-x-3.5
transform: translateX(0.875rem);
translate-y-3.5
transform: translateY(0.875rem);
translate-x-4
transform: translateX(1rem);
translate-y-4
transform: translateY(1rem);
translate-x-5
transform: translateX(1.25rem);
translate-y-5
transform: translateY(1.25rem);
translate-x-6
transform: translateX(1.5rem);
translate-y-6
transform: translateY(1.5rem);
translate-x-7
transform: translateX(1.75rem);
translate-y-7
transform: translateY(1.75rem);
translate-x-8
transform: translateX(2rem);
translate-y-8
transform: translateY(2rem);
translate-x-9
transform: translateX(2.25rem);
translate-y-9
transform: translateY(2.25rem);
translate-x-10
transform: translateX(2.5rem);
translate-y-10
transform: translateY(2.5rem);
translate-x-11
transform: translateX(2.75rem);
translate-y-11
transform: translateY(2.75rem);
translate-x-12
transform: translateX(3rem);
translate-y-12
transform: translateY(3rem);
translate-x-14
transform: translateX(3.5rem);
translate-y-14
transform: translateY(3.5rem);
translate-x-16
transform: translateX(4rem);
translate-y-16
transform: translateY(4rem);
translate-x-20
transform: translateX(5rem);
translate-y-20
transform: translateY(5rem);
translate-x-24
transform: translateX(6rem);
translate-y-24
transform: translateY(6rem);
translate-x-28
transform: translateX(7rem);
translate-y-28
transform: translateY(7rem);
translate-x-32
transform: translateX(8rem);
translate-y-32
transform: translateY(8rem);
translate-x-36
transform: translateX(9rem);
translate-y-36
transform: translateY(9rem);
translate-x-40
transform: translateX(10rem);
translate-y-40
transform: translateY(10rem);
translate-x-44
transform: translateX(11rem);
translate-y-44
transform: translateY(11rem);
translate-x-48
transform: translateX(12rem);
translate-y-48
transform: translateY(12rem);
translate-x-52
transform: translateX(13rem);
translate-y-52
transform: translateY(13rem);
translate-x-56
transform: translateX(14rem);
translate-y-56
transform: translateY(14rem);
translate-x-60
transform: translateX(15rem);
translate-y-60
transform: translateY(15rem);
translate-x-64
transform: translateX(16rem);
translate-y-64
transform: translateY(16rem);
translate-x-72
transform: translateX(18rem);
translate-y-72
transform: translateY(18rem);
translate-x-80
transform: translateX(20rem);
translate-y-80
transform: translateY(20rem);
translate-x-96
transform: translateX(24rem);
translate-y-96
transform: translateY(24rem);
translate-x-1/2
transform: translateX(50%);
translate-x-1/3
transform: translateX(33.333333%);
translate-x-2/3
transform: translateX(66.666667%);
translate-x-1/4
transform: translateX(25%);
translate-x-2/4
transform: translateX(50%);
translate-x-3/4
transform: translateX(75%);
translate-x-full
transform: translateX(100%);
translate-y-1/2
transform: translateY(50%);
translate-y-1/3
transform: translateY(33.333333%);
translate-y-2/3
transform: translateY(66.666667%);
translate-y-1/4
transform: translateY(25%);
translate-y-2/4
transform: translateY(50%);
translate-y-3/4
transform: translateY(75%);
translate-y-full
transform: translateY(100%);

Skew

Class
Properties
skew-x-0
transform: skewX(0deg);
skew-y-0
transform: skewY(0deg);
skew-x-1
transform: skewX(1deg);
skew-y-1
transform: skewY(1deg);
skew-x-2
transform: skewX(2deg);
skew-y-2
transform: skewY(2deg);
skew-x-3
transform: skewX(3deg);
skew-y-3
transform: skewY(3deg);
skew-x-6
transform: skewX(6deg);
skew-y-6
transform: skewY(6deg);
skew-x-12
transform: skewX(12deg);
skew-y-12
transform: skewY(12deg);

Transform Origin

Class
Properties
origin-center
transform-origin: center;
origin-top
transform-origin: top;
origin-top-right
transform-origin: top right;
origin-right
transform-origin: right;
origin-bottom-right
transform-origin: bottom right;
origin-bottom
transform-origin: bottom;
origin-bottom-left
transform-origin: bottom left;
origin-left
transform-origin: left;
origin-top-left
transform-origin: top left;
]]> <![CDATA[[tailwindcss] —— Transitions & Animation]]> https://blog.hiyb.top/article/14 https://blog.hiyb.top/article/14 Wed, 06 Mar 2024 00:00:00 GMT

Transition Property

Class
Properties
transition-none
transition-property: none;
transition-all
transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-colors
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-opacity
transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-shadow
transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;
transition-transform
transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;

Transition Duration

Class
Properties
duration-0
transition-duration: 0s;
duration-75
transition-duration: 75ms;
duration-100
transition-duration: 100ms;
duration-150
transition-duration: 150ms;
duration-200
transition-duration: 200ms;
duration-300
transition-duration: 300ms;
duration-500
transition-duration: 500ms;
duration-700
transition-duration: 700ms;
duration-1000
transition-duration: 1000ms;

Transition Timing Function

Class
Properties
ease-linear
transition-timing-function: linear;
ease-in
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-out
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-out
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Transition Delay

Class
Properties
delay-0
transition-delay: 0s;
delay-75
transition-delay: 75ms;
delay-100
transition-delay: 100ms;
delay-150
transition-delay: 150ms;
delay-200
transition-delay: 200ms;
delay-300
transition-delay: 300ms;
delay-500
transition-delay: 500ms;
delay-700
transition-delay: 700ms;
delay-1000
transition-delay: 1000ms;

Animation

Class
Properties
animate-none
animation: none;
animate-spin
animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
animate-ping
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
animate-pulse
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
animate-bounce
animation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
 
]]> <![CDATA[[tailwindcss] —— Tables]]> https://blog.hiyb.top/article/13 https://blog.hiyb.top/article/13 Wed, 06 Mar 2024 00:00:00 GMT

Border Collapse

Class
Properties
border-collapse
border-collapse: collapse;
border-separate
border-collapse: separate;

Border Spacing

Class
Properties
border-spacing-0
border-spacing: 0px 0px;
border-spacing-x-0
border-spacing: 0px var(--tw-border-spacing-y);
border-spacing-y-0
border-spacing: var(--tw-border-spacing-x) 0px;
border-spacing-px
border-spacing: 1px 1px;
border-spacing-x-px
border-spacing: 1px var(--tw-border-spacing-y);
border-spacing-y-px
border-spacing: var(--tw-border-spacing-x) 1px;
border-spacing-0.5
border-spacing: 0.125rem 0.125rem;
border-spacing-x-0.5
border-spacing: 0.125rem var(--tw-border-spacing-y);
border-spacing-y-0.5
border-spacing: var(--tw-border-spacing-x) 0.125rem;
border-spacing-1
border-spacing: 0.25rem 0.25rem;
border-spacing-x-1
border-spacing: 0.25rem var(--tw-border-spacing-y);
border-spacing-y-1
border-spacing: var(--tw-border-spacing-x) 0.25rem;
border-spacing-1.5
border-spacing: 0.375rem 0.375rem;
border-spacing-x-1.5
border-spacing: 0.375rem var(--tw-border-spacing-y);
border-spacing-y-1.5
border-spacing: var(--tw-border-spacing-x) 0.375rem;
border-spacing-2
border-spacing: 0.5rem 0.5rem;
border-spacing-x-2
border-spacing: 0.5rem var(--tw-border-spacing-y);
border-spacing-y-2
border-spacing: var(--tw-border-spacing-x) 0.5rem;
border-spacing-2.5
border-spacing: 0.625rem 0.625rem;
border-spacing-x-2.5
border-spacing: 0.625rem var(--tw-border-spacing-y);
border-spacing-y-2.5
border-spacing: var(--tw-border-spacing-x) 0.625rem;
border-spacing-3
border-spacing: 0.75rem 0.75rem;
border-spacing-x-3
border-spacing: 0.75rem var(--tw-border-spacing-y);
border-spacing-y-3
border-spacing: var(--tw-border-spacing-x) 0.75rem;
border-spacing-3.5
border-spacing: 0.875rem 0.875rem;
border-spacing-x-3.5
border-spacing: 0.875rem var(--tw-border-spacing-y);
border-spacing-y-3.5
border-spacing: var(--tw-border-spacing-x) 0.875rem;
border-spacing-4
border-spacing: 1rem 1rem;
border-spacing-x-4
border-spacing: 1rem var(--tw-border-spacing-y);
border-spacing-y-4
border-spacing: var(--tw-border-spacing-x) 1rem;
border-spacing-5
border-spacing: 1.25rem 1.25rem;
border-spacing-x-5
border-spacing: 1.25rem var(--tw-border-spacing-y);
border-spacing-y-5
border-spacing: var(--tw-border-spacing-x) 1.25rem;
border-spacing-6
border-spacing: 1.5rem 1.5rem;
border-spacing-x-6
border-spacing: 1.5rem var(--tw-border-spacing-y);
border-spacing-y-6
border-spacing: var(--tw-border-spacing-x) 1.5rem;
border-spacing-7
border-spacing: 1.75rem 1.75rem;
border-spacing-x-7
border-spacing: 1.75rem var(--tw-border-spacing-y);
border-spacing-y-7
border-spacing: var(--tw-border-spacing-x) 1.75rem;
border-spacing-8
border-spacing: 2rem 2rem;
border-spacing-x-8
border-spacing: 2rem var(--tw-border-spacing-y);
border-spacing-y-8
border-spacing: var(--tw-border-spacing-x) 2rem;
border-spacing-9
border-spacing: 2.25rem 2.25rem;
border-spacing-x-9
border-spacing: 2.25rem var(--tw-border-spacing-y);
border-spacing-y-9
border-spacing: var(--tw-border-spacing-x) 2.25rem;
border-spacing-10
border-spacing: 2.5rem 2.5rem;
border-spacing-x-10
border-spacing: 2.5rem var(--tw-border-spacing-y);
border-spacing-y-10
border-spacing: var(--tw-border-spacing-x) 2.5rem;
border-spacing-11
border-spacing: 2.75rem 2.75rem;
border-spacing-x-11
border-spacing: 2.75rem var(--tw-border-spacing-y);
border-spacing-y-11
border-spacing: var(--tw-border-spacing-x) 2.75rem;
border-spacing-12
border-spacing: 3rem 3rem;
border-spacing-x-12
border-spacing: 3rem var(--tw-border-spacing-y);
border-spacing-y-12
border-spacing: var(--tw-border-spacing-x) 3rem;
border-spacing-14
border-spacing: 3.5rem 3.5rem;
border-spacing-x-14
border-spacing: 3.5rem var(--tw-border-spacing-y);
border-spacing-y-14
border-spacing: var(--tw-border-spacing-x) 3.5rem;
border-spacing-16
border-spacing: 4rem 4rem;
border-spacing-x-16
border-spacing: 4rem var(--tw-border-spacing-y);
border-spacing-y-16
border-spacing: var(--tw-border-spacing-x) 4rem;
border-spacing-20
border-spacing: 5rem 5rem;
border-spacing-x-20
border-spacing: 5rem var(--tw-border-spacing-y);
border-spacing-y-20
border-spacing: var(--tw-border-spacing-x) 5rem;
border-spacing-24
border-spacing: 6rem 6rem;
border-spacing-x-24
border-spacing: 6rem var(--tw-border-spacing-y);
border-spacing-y-24
border-spacing: var(--tw-border-spacing-x) 6rem;
border-spacing-28
border-spacing: 7rem 7rem;
border-spacing-x-28
border-spacing: 7rem var(--tw-border-spacing-y);
border-spacing-y-28
border-spacing: var(--tw-border-spacing-x) 7rem;
border-spacing-32
border-spacing: 8rem 8rem;
border-spacing-x-32
border-spacing: 8rem var(--tw-border-spacing-y);
border-spacing-y-32
border-spacing: var(--tw-border-spacing-x) 8rem;
border-spacing-36
border-spacing: 9rem 9rem;
border-spacing-x-36
border-spacing: 9rem var(--tw-border-spacing-y);
border-spacing-y-36
border-spacing: var(--tw-border-spacing-x) 9rem;
border-spacing-40
border-spacing: 10rem 10rem;
border-spacing-x-40
border-spacing: 10rem var(--tw-border-spacing-y);
border-spacing-y-40
border-spacing: var(--tw-border-spacing-x) 10rem;
border-spacing-44
border-spacing: 11rem 11rem;
border-spacing-x-44
border-spacing: 11rem var(--tw-border-spacing-y);
border-spacing-y-44
border-spacing: var(--tw-border-spacing-x) 11rem;
border-spacing-48
border-spacing: 12rem 12rem;
border-spacing-x-48
border-spacing: 12rem var(--tw-border-spacing-y);
border-spacing-y-48
border-spacing: var(--tw-border-spacing-x) 12rem;
border-spacing-52
border-spacing: 13rem 13rem;
border-spacing-x-52
border-spacing: 13rem var(--tw-border-spacing-y);
border-spacing-y-52
border-spacing: var(--tw-border-spacing-x) 13rem;
border-spacing-56
border-spacing: 14rem 14rem;
border-spacing-x-56
border-spacing: 14rem var(--tw-border-spacing-y);
border-spacing-y-56
border-spacing: var(--tw-border-spacing-x) 14rem;
border-spacing-60
border-spacing: 15rem 15rem;
border-spacing-x-60
border-spacing: 15rem var(--tw-border-spacing-y);
border-spacing-y-60
border-spacing: var(--tw-border-spacing-x) 15rem;
border-spacing-64
border-spacing: 16rem 16rem;
border-spacing-x-64
border-spacing: 16rem var(--tw-border-spacing-y);
border-spacing-y-64
border-spacing: var(--tw-border-spacing-x) 16rem;
border-spacing-72
border-spacing: 18rem 18rem;
border-spacing-x-72
border-spacing: 18rem var(--tw-border-spacing-y);
border-spacing-y-72
border-spacing: var(--tw-border-spacing-x) 18rem;
border-spacing-80
border-spacing: 20rem 20rem;
border-spacing-x-80
border-spacing: 20rem var(--tw-border-spacing-y);
border-spacing-y-80
border-spacing: var(--tw-border-spacing-x) 20rem;
border-spacing-96
border-spacing: 24rem 24rem;
border-spacing-x-96
border-spacing: 24rem var(--tw-border-spacing-y);
border-spacing-y-96
border-spacing: var(--tw-border-spacing-x) 24rem;

Table Layout

Class
Properties
table-auto
table-layout: auto;
table-fixed
table-layout: fixed;

Caption Side

Class
Properties
caption-top
caption-side: top;
caption-bottom
caption-side: bottom;
]]>