布局与样式

这篇讲手表屏幕上怎么排版，以及哪些 CSS 写了也不会生效。

学完能做什么： 用列 flex 和 Tailwind 搭出居中、可扫读的一屏；避开 gap / grid / vh。

前置： .ux 与 manifest。

单位

大小类样式按 设计基准宽度 缩放。样式文档默认基准是 750px；manifest.json 里 config.designWidth 建议手表用 466。以你工程 manifest 为准。单位用 px 或 %，没有 rem / em / vw / vh。

详见 style 样式。

只有 flex

display 只支持 flex 和 none。没有 block、inline-block、grid。

手表一屏通常是列方向：

<script>
  export default {
    data: {},
  }
</script>

<template>
  <div class="flex flex-col items-center justify-center w-full">
    <text class="text-white text-3xl">标题</text>
    <text class="text-white mt-10">副标题</text>
  </div>
</template>

<style>
@tailwind utilities;
</style>

间距用子元素 margin（例如 mt-10），不要写 gap-*。:last-child 也不支持。

Tailwind

优先 utilities，并在 <style> 里保留 @tailwind utilities;，未用到的 class 会被清除。手写 CSS 只留给 utilities 表达不了的规则（例如某些圆角必须同时带 border-width）。

页面根节点如果还要纵向滚动，不要用 h-full / height: 100% 把高度锁死。Hello World 那种一屏居中可以 h-full。

明确不支持

不要用	原因
gap	未支持，布局会乱
grid / block	display 只有 flex / none
CSS 变量 var(--x)	解析不了
:hover / :nth-child	伪类几乎只有 :active
position: sticky	未支持；list / swiper / scroll 里 position 还会失效
z-index	未支持，后写的节点叠在上面

完整表：通用样式。

本页要点

• 布局就是 flex；间距用 margin。
• 先 Tailwind，再手写 CSS。
• 写了不生效时，先查是不是子集之外的属性，而不是先怪预览器。

下一篇：数据、列表与事件