/* 隐藏滚动条 */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } 2. 在Tailwind CSS中使用自定义类 在你的HTML文件中,你可以给需要隐藏滚动条的元素添加scrollbar-hide类。例...
<!-- 添加故事按钮 --> <svg class="h-8 w-8 text-gray-400 group-hover:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> </svg...
要隐藏滚动条,您需要直接设置它的样式: /* Hide scrollbar for Chrome, Safari and Opera */ .no-scrollbar::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* ...
你可以在你的配置中使用一个插件轻松地添加这些工具作为Tailwind工具:https://tailwindcss.com/docs/...
"tailwind-scrollbar-hide": "^1.1.7", "tailwindcss": "^3.4.13" "tailwind-scrollbar-hide": "^1.1.7" }, "devDependencies": { "@tailwindcss/vite": "^4.0.0-alpha.28", "tailwindcss": "^4.0.0-alpha.28" } } 12 changes: 6 additions & 6 deletions 12 src/pages/accordion-javascript...
overflow-y: auto; &::-webkit-scrollbar { width: 0; } Expand All @@ -21,9 +22,16 @@ margin-left: 220px; overflow-x: hidden; transition: margin .2s; &.collapsed{ margin-left: 80px; &.collapsed { margin-left: 55px; border-right: 1px solid #e5e5e5; } &.horizontal { margi...
通过组合预定义的class来直接在HTML中构建任何设计。博主以一个卡片UI的例子对Tailwind CSS进行了解释,...
这是tailwindcss和动态类的一个已知问题,因为类是在渲染之后应用的,所以tailwind不会生成其效果,除非中...
为了使用任意值语法(带方括号),您需要启用JIT模式,并确保您在Tailwind 2.1或更高版本上。这将按需...
/** * Chrome has a bug with transitions onLoad since 2012! * * To prevent a "pop" of...