"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 focus:ring-0 focus-visible:ring...
cursor-autocursor:auto; cursor-defaultcursor:default; cursor-pointercursor:pointer; cursor-waitcursor:wait; cursor-textcursor:text; cursor-movecursor:move; cursor-helpcursor:help; cursor-not-allowedcursor:not-allowed; cursor-nonecursor:none;
正在使用的技术是-ReactJS, Tailwind CSS 以下是使用的类的示例代码片段: Click me 注意:disableIt是用于禁用或启用按钮的状态 我的tailwind.config.js文件的变体部分如下: variants: { opacity: ({ after }) => after(["disabled"]), backgroundColor: ({ after }) => after([...
在这个 Demo 中,我们使用了 Tailwind CSS 的 container 类来创建一个响应式的容器,并且使用了 grid 类来创建一个网格系统。grid-cols-1 表示列数为 1,md:grid-cols-2 表示在中等大小的屏幕上列数为 2,lg:grid-cols-3 表示在大屏幕上列数为 3。
import { toRefs, computed } from 'vue' const baseClasses = [ 'inline-flex items-center transition-colors font-medium select-none disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-dark-eval-2', ...
下面呢,我们就以我相对熟悉的技术(Vite+React)来演示如何在项目中使用Tailwind CSS。 1. 创建项目 我们是用Vite来创建一个React+TS项目。 yarn create vite tailwindReact --template react-ts cd tailwindReact 1. 2. 2. 安装 Tailwind 相关依赖 yarn add -D tailwindcss postcss autoprefixer ...
bg-yellow-800 active:scale-95"> Active Me Disabled 在这个示例中,我们使用了以下 Tailwind CSS 交互样式类: hover:bg-blue-700: 当鼠标悬停在元素上时,背景颜色变为深蓝色。 focus:outline-none: 当元素获得焦点时,移除默认的焦点轮廓。 focus:ring-2: 当元素获得焦点时,添加一个 2px 的环...
下面呢,我们就以我相对熟悉的技术(Vite+React)来演示如何在项目中使用Tailwind CSS。 1. 创建项目 我们是用Vite来创建一个React+TS项目。 代码语言:javascript 复制 yarn create vite tailwindReact--template react-ts cd tailwindReact 2. 安装 Tailwind 相关依赖 ...
<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" />
cursor-not-allowed: hover 到该按钮上,鼠标标识变为禁用标志 disabled 手机端的自适应问题 即便将 active item 两侧的条目压缩到一个,实际上在手机端还是显示不全。 参考官方的实现,在手机端只保留上一页与下一页,两端对齐。其他页码隐藏即可。 配合gorm 使用 ...