结合 HTMX 和 UnoCSS 可以创建出高效、动态的前端页面，同时保持简洁的 HTML 结构和灵活的样式控制。以下是如何将 UnoCSS 应用到使用 HTMX 的前端页面的详细说明：
- 项目设置
首先，确保你的项目中已经设置好了 HTMX 和 UnoCSS：
<head>
<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
<!-- UnoCSS -->
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js"></script>
</head>- 基本 HTML 结构
使用 UnoCSS 的原子类来样式化你的 HTML 元素：
<body class="bg-gray-100 p-4">
<div id="app" class="max-w-2xl mx-auto bg-white shadow-md rounded-lg p-6">
<h1 class="text-2xl font-bold mb-4">Task List</h1>
<div id="task-list" class="space-y-2">
<!-- Tasks will be loaded here -->
</div>
<form id="add-task-form" class="mt-4">
<input
type="text"
name="task"
placeholder="New task"
class="border rounded px-2 py-1 w-full mb-2"
>
<button
type="submit"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
Add Task
</button>
</form>
</div>
</body>- 使用 HTMX 加载和提交数据
添加 HTMX 属性来处理动态内容加载和表单提交：
<div
id="task-list"
class="space-y-2"
hx-get="/tasks"
hx-trigger="load, newTask from:body"
>
<!-- Tasks will be loaded here -->
</div>
<form
id="add-task-form"
class="mt-4"
hx-post="/tasks"
hx-target="#task-list"
hx-swap="beforeend"
>
<input
type="text"
name="task"
placeholder="New task"
class="border rounded px-2 py-1 w-full mb-2"
>
<button
type="submit"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
Add Task
</button>
</form>- 服务器端返回的 HTML
当 HTMX 发送请求时，服务器应返回包含 UnoCSS 类的 HTML 片段：
<!-- 单个任务项 -->
<div class="flex items-center justify-between bg-gray-50 p-2 rounded">
<span class="text-gray-700">Task description</span>
<button
class="text-red-500 hover:text-red-700"
hx-delete="/tasks/1"
hx-target="closest div"
hx-swap="outerHTML"
>
Delete
</button>
</div>- 动态内容的样式
对于动态加载的内容，确保使用一致的 UnoCSS 类来保持样式的一致性。
- 响应式设计
利用 UnoCSS 的响应式类来创建适应不同屏幕尺寸的布局：
<div id="app" class="max-w-2xl mx-auto bg-white shadow-md rounded-lg p-4 sm:p-6 lg:p-8">
<!-- 内容 -->
</div>- 状态变化和交互
使用 UnoCSS 的状态类和 HTMX 的事件处理来响应用户交互：
<button
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 active:bg-blue-700"
hx-post="/tasks"
hx-trigger="click"
hx-target="#task-list"
hx-swap="beforeend"
>
Add Task
</button>- 动画和过渡
结合 UnoCSS 的过渡类和 HTMX 的触发器来添加动画效果：
<div
class="transition-all duration-300 ease-in-out"
hx-get="/tasks"
hx-trigger="load"
hx-swap="innerHTML transition:fade"
>
<!-- 任务列表 -->
</div>- 自定义样式
如果需要更复杂的样式，可以在 UnoCSS 配置中定义自定义类或使用 @apply 指令：
<style>
@unocss-apply;
.custom-task-item {
@apply bg-gray-50 p-2 rounded flex items-center justify-between;
}
</style>- 性能优化
UnoCSS 默认情况下是按需生成的，这与 HTMX 的部分页面更新特性非常契合，可以确保只加载必要的 CSS。
通过这种方式，你可以创建出既有 HTMX 动态交互能力，又具备 UnoCSS 灵活样式控制的现代化前端页面。这种组合既保持了 HTML 的简洁性，又提供了强大的样式定制能力，同时还能享受到两者带来的性能优势。