/* ============================================================ Tailwind CSS Preflight + Common Utilities (Inline Extracted) ------------------------------------------------------------ 用途：Tailwind CDN 脚本加载前 / 禁用 JS 时的样式兜底 - Tailwind CSS 变量（--tw-*）预定义 - CSS 重置（Preflight / Base Reset，来自 tailwindcss v3.4.17） - 站点常用的 utility 类（mb-* / w-* / bg-* / text-* / hover:* 等） 顺序：在 中先引入本文件 → 再引入 style.css（自定义主题） ============================================================ */ /* --- Tailwind CSS 变量定义（* + ::backdrop 两组） --- */ *, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* --- Tailwind CSS 3.4.17 Preflight (Base Reset) --- */ /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ *,::after,::before{ box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; } ::after,::before{ --tw-content: ''; } :host,html{ line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } body{ margin: 0; line-height: inherit; } hr{ height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]){ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1,h2,h3,h4,h5,h6{ font-size: inherit; font-weight: inherit; } a{ color: inherit; text-decoration: inherit; } b,strong{ font-weight: bolder; } code,kbd,pre,samp{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small{ font-size: 80%; } sub,sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub{ bottom: -.25em; } sup{ top: -.5em; } table{ text-indent: 0; border-color: inherit; border-collapse: collapse; } button,input,optgroup,select,textarea{ font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; } button,select{ text-transform: none; } button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){ -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring{ outline: auto; } :-moz-ui-invalid{ box-shadow: none; } progress{ vertical-align: baseline; } ::-webkit-inner-spin-button,::-webkit-outer-spin-button{ height: auto; } [type=search]{ -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration{ -webkit-appearance: none; } ::-webkit-file-upload-button{ -webkit-appearance: button; font: inherit; } summary{ display: list-item; } blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{ margin: 0; } fieldset{ margin: 0; padding: 0; } legend{ padding: 0; } menu,ol,ul{ list-style: none; margin: 0; padding: 0; } dialog{ padding: 0; } textarea{ resize: vertical; } input::placeholder,textarea::placeholder{ opacity: 1; color: #9ca3af; } [role=button],button{ cursor: pointer; } :disabled{ cursor: default; } audio,canvas,embed,iframe,img,object,svg,video{ display: block; vertical-align: middle; } img,video{ max-width: 100%; height: auto; } [hidden]:where(:not([hidden=until-found])){ display: none; } /* --- 常用 Tailwind Utility Class 兜底（首屏可见元素用到的类） --- */ .mb-8{margin-bottom: 2rem;} .mb-1{margin-bottom: 0.25rem;} .mb-2{margin-bottom: 0.5rem;} .ml-2{margin-left: 0.5rem;} .inline-block{display: inline-block;} .flex{display: flex;} .aspect-square{aspect-ratio: 1 / 1;} .h-full{height: 100%;} .w-1\/3{width: 33.333333%;} .w-2\/3{width: 66.666667%;} .w-full{width: 100%;} .items-center{align-items: center;} .truncate{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .rounded{border-radius: 0.25rem;} .rounded-full{border-radius: 9999px;} .bg-gray-100{ --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } .bg-purple-600{ --tw-bg-opacity: 1; background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1)); } .object-cover{object-fit: cover;} .p-2{padding: 0.5rem;} .p-3{padding: 0.75rem;} .px-2{padding-left: 0.5rem; padding-right: 0.5rem;} .px-4{padding-left: 1rem; padding-right: 1rem;} .py-0\.5{padding-top: 0.125rem; padding-bottom: 0.125rem;} .py-1{padding-top: 0.25rem; padding-bottom: 0.25rem;} .text-center{text-align: center;} .text-lg{font-size: 1.125rem; line-height: 1.75rem;} .text-xs{font-size: 0.75rem; line-height: 1rem;} .text-sm{font-size: 0.875rem; line-height: 1.25rem;} .font-bold{font-weight: 700;} .font-medium{font-weight: 500;} .text-gray-900{ --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity, 1)); } .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .text-gray-500{ --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } .text-gray-600{ --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .text-yellow-400{ --tw-text-opacity: 1; color: rgb(250 204 21 / var(--tw-text-opacity, 1)); } .transition{ transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-300{transition-duration: 300ms;} .ease-in-out{transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);} .hover\:bg-purple-700:hover{ --tw-bg-opacity: 1; background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1)); }