TailwindCSS 学习工具
第四章
桌面
平板
手机
重置代码
学习模块
基础概念
了解 TailwindCSS
进度: 0%
工具类练习
布局、样式、间距
进度: 0%
响应式设计
断点和适配
进度: 0%
组件构建
实战项目
进度: 0%
代码编辑器
HTML + TailwindCSS
复制代码
<!-- 欢迎来到 TailwindCSS 学习工具！ --> <!-- 在这里编写你的 HTML 和 TailwindCSS 代码 --> <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden"> <div class="md:flex"> <div class="md:shrink-0"> <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=beautiful%20mountain%20landscape%20with%20lake&image_size=square" alt="美丽的风景"> </div> <div class="p-8"> <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">案例研究</div> <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">TailwindCSS 入门</a> <p class="mt-2 text-slate-500">开始学习现代化的 CSS 框架，掌握工具类优先的设计方法。</p> <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"> 开始学习 </button> </div> </div> </div>
实时预览
桌面视图
刷新
课程内容
加载中...
操作成功！