<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> ...
safari中img的min-witdh-full等会使图片拉伸变形 backdrop-filter: blur 与其内部的子元素 z-index 会有冲突,可以单独设置一个背景层,绝对定位,覆盖100%, 设置pointer-events-none使鼠标事件穿透 使用divide-y 来生成元素间的边框 不使用flex或grid时,可以用space-y来代替gap line-clamp 来控制你想显示的文本行...
如果大家想在项目中使用Tailwind CSS,可以考虑下,自己团队和项目中,是否满足下面的条件;如果不满足下面的要求,Tailwind可能会让我们的工作变得举步维艰。 1. 统一的设计规则 首先,在项目中应该有一个设计规则。这就要求UI小姐姐和你需要通力合作。也就是UI设计和前端应该使用一致的设计规范。 假设我们有一个标准按钮...
className={`${classNames(isLoading)?"pointer-events-none opacity-60 hover:cursor-not-allowed":""}border border-white/60 min-h-[120px] max-h-[240px] rounded-xl flex p-[15px] mt-4`}><textarea className="m-0 resize-none box-border flex-1 h-full bg-transparent overflow-y-auto focu...
<textarea className="m-0 resize-none box-border flex-1 h-full bg-transparent overflow-y-auto focus:ring-0 focus-visible:ring-0 leading-7 w-full text-white" />
shadow-outline"> Really long option that will likely overlap the chevron Option 2 Option 3 <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></sv...
Pointer Events Resize User Select SVG Fill Stroke Stroke Width Accessibility Screen Readers Official Plugins Typography Most CSS frameworks do too much. They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain...
'pointer-events-none opacity-50': href && disabled.value, }, ]) // <slot :iconSizeClasses="iconSizeClasses" /> const iconSizeClasses = [ { 'w-5 h-5': size == 'sm', 'w-6 h-6': size == 'base', 'w-7 h-7': size == 'lg', ...
Block Level Button Rounded Button You can use tailwind cssrounded-fullclass with Button to create rounded buttons.
yarn add -D tailwindcss postcss autoprefixer 1. 在安装完依赖后,我们需要通过指定命令生成tailwind css的配置文件。 npx tailwindcss init -p 1. 此时,会在项目的根目录下,自动生成两个文件 tailwind.config.js postcss.config.js 紧接着,我们需要在tailwind.config.js中配置模板路径。