Runoops Demo
Tailwind v4 Play CDN - 自定义工具类
实例首页
自学教程
效率工具箱
源代码
外部库
0
重置
下载
上下布局
运行
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind v4 Play CDN - 自定义工具类</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <style type="text/tailwindcss"> @utility text-shadow { text-shadow: 0 2px 6px rgb(0 0 0 / 0.3); } @utility bg-gradient-card { background: linear-gradient(120deg, #0ea5e9, #8b5cf6); } @utility rotate-hover { transform: rotate(1deg); } @utility my-border { border: var(--tw-capture); } @variants my-border-[*] { --tw-capture: --value; } @theme { --color-brand: #165DFF; } </style> </head> <body class="p-8 bg-gray-100"> <div class="p-6 bg-gradient-card rounded-xl text-white text-shadow"> <h2 class="text-2xl font-bold">v4 自定义工具（捕获任意值）</h2> <p class="mt-3">支持 hover、md: 修饰符</p> <div class="mt-4 p-3 rounded-lg bg-white/20 hover:rotate-hover transition-transform"> hover触发旋转：<code>hover:rotate-hover</code> </div> </div> <!-- 🎯 直接写 my-border-[xxx]，不用style --> <div class="mt-6 p-4 my-border-[4px_solid_orange] rounded-lg bg-white"> 捕获任意值：<code>my-border-[4px_solid_orange]</code> </div> <div class="mt-6 p-4 bg-white rounded-lg md:text-shadow"> 窗口≥768px，出现文字阴影：<code>md:text-shadow</code> </div> <div class="mt-6 p-4 bg-white rounded-lg"> <h3 class="text-brand text-xl font-bold">自定义品牌色</h3> </div> </body> </html>
运行结果
刷新
放大
全屏
外部库
搜索并选择 CDN 库，将自动写入源代码（可再手动调整）
关闭
staticfileCDN
cloudflareCDN
添加