cursor-defaultcursor: default; cursor-pointercursor: pointer; cursor-waitcursor: wait; cursor-textcursor: text; cursor-movecursor: move; cursor-helpcursor: help; cursor-not-allowedcursor: not-allowed; Auto Usec
正在使用的技术是- ReactJS, Tailwind CSS 以下是使用的类的示例代码片段: Click me 注意:disableIt 是用于禁用或启用按钮的状态 我的tailwind.config.js文件的变体部分如下: variants: { opacity: ({ after }) => after(["disabled"]), backgroundColor: ({ after }) => after(...
禁用按钮 过渡动画 transition与duration-{n}:transition-all过渡所有属性,duration-300设置过渡时长为 300 毫秒。使按钮点击时背景色渐变: 提交按钮 三、响应式设计 1. 断点前缀 Tailwind CSS 提供了多个响应式断点前缀: sm:(小屏幕,≥640px):适用于手机横屏等场景。 md:(中等屏幕,≥768px):常用于平板...
type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed" disabled > <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24"><!-- 加载图标 SVG --></svg> 提交中... 最佳实践 表单布局 用户名 <!-- 更多表单字段...
yarn add -D tailwindcss postcss autoprefixer 在安装完依赖后,我们需要通过指定命令生成tailwind css的配置文件。 npx tailwindcss init -p 此时,会在项目的根目录下,自动生成两个文件 tailwind.config.js postcss.config.js 紧接着,我们需要在tailwind.config.js中配置模板路径。
class="bg-gray-300 text-gray-500 px-4 py-2 rounded cursor-not-allowed" disabled > 禁用按钮 尝试一下 » 动画实现 Tailwind 提供了强大的动画工具,无需编写 CSS 关键帧即可实现常见动画效果。 1. 过渡动画 (Transition) 实例 尝试一下 » 关键类: transition-all:指定哪些属性需要过渡 duration...
Disabled <!DOCTYPE html> Tailwind CSS Interactions
下面呢,我们就以我相对熟悉的技术(Vite+React)来演示如何在项目中使用Tailwind CSS。 1. 创建项目 我们是用Vite来创建一个React+TS项目。 代码语言:javascript 代码运行次数:0 运行 AI代码解释 yarn create vite tailwindReact--template react-ts cd tailwindReact ...
在这个 Demo 中,我们使用了 Tailwind CSS 的 container 类来创建一个响应式的容器,并且使用了 grid 类来创建一个网格系统。grid-cols-1 表示列数为 1,md:grid-cols-2 表示在中等大小的屏幕上列数为 2,lg:grid-cols-3 表示在大屏幕上列数为 3。
cursor-pointercursor: pointer;聚焦 cursor-not-allowedcursor: not-allowed;禁止 pointer-events-nonepointer-events: none;阻止浏览器事件 select-noneuser-select: none;禁止选中 注:用 text 千万要注意line-height,虽然很想吐槽 明明是 font-size ,但整个 text 很异类. ...