原木色 <!-- 更多颜色选项... --> <!-- 数量选择 --> 减少数量 <svg class="h-4 w-4 text-gray-500" fill="none" stroke
<!-- 深色模式切换按钮无障碍支持 --> 切换到深色模式 <!-- 图标 --> <!-- 颜色对比度检查 --> :root { /* WCAG 2.1 Level AA 标准 */ --color-contrast-light: #ffffff; /* 背景色 */ --color-contrast-dark: #1f2937; /* 文本色 */ /* 确保对比度比至少为 4.5:1 */ }...
这个示例中,sr-only类名隐藏了"Click Me"文本,但仍然保持按钮的交互性。 示例8: 版本控制 使用版本控制工具(如Git)来管理Tailwind CSS样式表的变化,以便跟踪和回滚样式更改。这有助于团队合作,确保代码库的稳定性。 git init git add . git commit -m "Initial commit" 示例9: 文档和教育 创建项目文档,解...
rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 transition duration-150 ease-in-out">Sign in with GitHub<svgclass="w-5 h-5"fill="currentColor"viewBox="0 0 20 20"><pathfill-rule="evenodd"d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6....
Choose profile photo Yes, send me all your stupid updates
accessibility The sr-only and not-sr-only utilities alignContent The align-content utilities like content-end alignItems The align-items utilities like items-center alignSelf The align-self utilities like self-end animation The animation utilities like appearance The appearance utilities like appearance...
Choose profile photo Yes, send me all your stupid updates Learn more in the
sr-only position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; not-sr-only position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; wh...
Search <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 ...
class="sr-only">New document New document <svg class="w-5 h-5 mb-1 text-gray-500