purgetss

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

PurgeTSS Expert

PurgeTSS 专家指南

Utility-first styling toolkit for Titanium/Alloy mobile apps.

适用于Titanium/Alloy移动应用的优先实用类样式工具包。

Project Detection

项目检测

:::info AUTO-DETECTS PURGETSS PROJECTS This skill automatically detects PurgeTSS usage when invoked and provides utility-first styling guidance.

Detection occurs automatically - no manual command needed.

PurgeTSS project indicators:

```
purgetss/
```
folder
```
purgetss/config.cjs
```
configuration file
```
purgetss/styles/utilities.tss
```
utility classes
```
app/styles/app.tss
```
(auto-generated)

Behavior based on detection:

PurgeTSS detected → Provides PurgeTSS-specific guidance, recommends utility classes, suggests
```
$.UI.create()
```
for dynamic components
Not detected → Does NOT suggest PurgeTSS utility classes, does NOT recommend
```
$.UI.create()
```
, does NOT reference PurgeTSS-specific patterns :::

:::info 自动检测PurgeTSS项目调用本技能时会自动检测PurgeTSS的使用情况，并提供优先实用类的样式指导。

检测自动进行 - 无需手动命令。

PurgeTSS项目标识：

```
purgetss/
```
文件夹
```
purgetss/config.cjs
```
配置文件
```
purgetss/styles/utilities.tss
```
实用类
```
app/styles/app.tss
```
（自动生成）

基于检测结果的行为：

检测到PurgeTSS → 提供PurgeTSS专属指导，推荐实用类，建议使用
```
$.UI.create()
```
创建动态组件
未检测到 → 不建议使用PurgeTSS实用类，不推荐
```
$.UI.create()
```
，不引用PurgeTSS专属模式 :::

Core Workflow

核心工作流程

Setup:
```
purgetss create 'name'
```
or
```
purgetss init
```
for existing projects
Build: Write XML with utility classes → PurgeTSS auto-generates
```
app.tss
```
Configure: Customize via
```
purgetss/config.cjs
```

设置：对于新项目使用
```
purgetss create 'name'
```
，现有项目使用
```
purgetss init
```
构建：编写带实用类的XML → PurgeTSS自动生成
```
app.tss
```
配置：通过
```
purgetss/config.cjs
```
进行自定义

Project Structure

项目结构

bash

./purgetss/
├─ fonts/              # Custom font files (.ttf, .otf)
├─ styles/
│  ├─ definitions.css  # For VS Code IntelliSense
│  └─ utilities.tss     # All PurgeTSS utility classes (renamed from tailwind.tss in v7.3)
└─ config.cjs          # Theme configuration

./app/styles/
├─ app.tss             # AUTO-GENERATED - DO NOT EDIT DIRECTLY
└─ _app.tss            # YOUR CUSTOM STYLES (persists across runs)

bash

./purgetss/
├─ fonts/              # 自定义字体文件（.ttf, .otf）
├─ styles/
│  ├─ definitions.css  # 用于VS Code智能提示
│  └─ utilities.tss     # 所有PurgeTSS实用类（v7.3中从tailwind.tss重命名而来）
└─ config.cjs          # 主题配置

./app/styles/
├─ app.tss             # 自动生成 - 请勿直接编辑
└─ _app.tss            # 你的自定义样式（在多次运行中保留）

Understanding

app.tss

_app.tss

理解

app.tss

与

_app.tss

的区别

:::warning CRITICAL: app.tss IS AUTO-GENERATED app.tss
is ALWAYS regenerated every time the app compiles.

PurgeTSS scans ALL XMLs and Controllers for utility classes, then generates a fresh

app.tss

containing only the classes actually used.

NEVER edit
app.tss
directly - your changes WILL be overwritten on the next build. :::

:::info THE

_app.tss

BACKUP FILE On first run, PurgeTSS backs up your original

app.tss

_app.tss

_app.tss
is your custom styles file - it persists across all PurgeTSS runs.

Every build, PurgeTSS:

Scans XMLs and Controllers for used classes
Regenerates
```
app.tss
```
from scratch
Copies
```
_app.tss
```
content into the generated
```
app.tss
```

Better approach: define custom classes in

config.cjs

instead of

_app.tss

. :::

:::warning 重要提示：app.tss为自动生成 app.tss
每次应用编译时都会重新生成。

PurgeTSS会扫描所有XML和控制器中的实用类，然后生成仅包含实际使用类的全新

app.tss

。

切勿直接编辑
app.tss
- 你的修改会在下次构建时被覆盖。 :::

:::info _app.tss备份文件在首次运行时，PurgeTSS会将你原有的

app.tss

备份到

_app.tss

。

_app.tss
是你的自定义样式文件 - 它会在所有PurgeTSS运行中保留。

每次构建时，PurgeTSS会：

扫描XML和控制器中使用的类
从头重新生成
```
app.tss
```
将
```
_app.tss
```
的内容复制到生成的
```
app.tss
```
中

更好的方式：在

config.cjs

中定义自定义类，而非

_app.tss

。 :::

Checking for Unused/Unsupported Classes

检查未使用/不支持的类

:::danger ALWAYS CHECK

app.tss

FOR ERRORS At the end of every generated
app.tss
, look for this section:

tss

// Unused or unsupported classes
// .my-typo-class
// .non-existent-utility

These are classes used in your XMLs or Controllers that have NO definition anywhere:

Not in
```
utilities.tss
```
(generated from PurgeTSS utilities)
Not in
```
_app.tss
```
(your custom styles)
Not in any other
```
.tss
```
file in the
```
styles/
```
folder

This means:

You have a typo in your class name
You're using a class that doesn't exist in PurgeTSS
You need to define the class in
```
_app.tss
```
or
```
config.cjs
```

As part of any analysis, ALWAYS check the end of
app.tss
and report any unused/unsupported classes to the user! :::

:::danger 务必检查app.tss中的错误在每个生成的

app.tss

的末尾，会有如下部分：

tss

// Unused or unsupported classes
// .my-typo-class
// .non-existent-utility

这些是你在XML或控制器中使用，但在任何地方都没有定义的类：

不在
```
utilities.tss
```
中（由PurgeTSS实用类生成）
不在
```
_app.tss
```
中（你的自定义样式）
不在
```
styles/
```
文件夹中的其他
```
.tss
```
文件里

这意味着：

你的类名存在拼写错误
你使用了PurgeTSS中不存在的类
你需要在
```
_app.tss
```
或
```
config.cjs
```
中定义该类

作为分析的一部分，务必检查
app.tss
的末尾，并向用户报告所有未使用/不支持的类！ :::

How

utilities.tss

Works

utilities.tss的工作原理

:::info UTILITIES.TSS REGENERATION

./purgetss/styles/utilities.tss

contains ALL available PurgeTSS utility classes.

It regenerates when
./purgetss/config.cjs
changes - this is where you define:

Custom colors
Custom spacing scales
Ti Element styles
Any project-specific utilities

If a class appears in "Unused or unsupported classes" in

app.tss

, it means it's truly not defined anywhere - not even in your

config.cjs

customizations. :::

:::info utilities.tss的重新生成

./purgetss/styles/utilities.tss

包含所有可用的PurgeTSS实用类。

当
./purgetss/config.cjs
更改时，它会重新生成 - 你可以在该配置文件中定义：

自定义颜色
自定义间距比例
Ti元素样式
任何项目专属的实用类

如果某个类出现在

app.tss

的“未使用或不支持的类”部分，说明它确实在任何地方都没有定义——甚至不在你的

config.cjs

自定义配置中。 :::

Quick Start

快速开始

bash

purgetss create 'MyApp' -d -v fa

bash

purgetss create 'MyApp' -d -v fa

-d: Install dev dependencies (ESLint, Tailwind)

-d: 安装开发依赖（ESLint, Tailwind）

-v: Copy icon fonts (fa, mi, ms, f7)

-v: 复制图标字体（fa, mi, ms, f7）

undefined

undefined

What's New in v7.3.x

v7.3.x版本新特性

```
tailwind.tss
```
was renamed to
```
utilities.tss
```
(update any scripts or references).
XML syntax validation now runs before processing and reports line-level errors (for example, missing
```
<
```
).
```
deviceInfo()
```
works in both Alloy and Classic (no
```
Alloy.isTablet
```
/
```
Alloy.isHandheld
```
dependency).
Node.js 20+ is required.
Font Awesome 7 is supported, including the new
```
--fa:
```
CSS custom properties.
VS Code:
```
KevinYouu.tailwind-raw-reorder-tw4
```
is recommended for class ordering.

If you hit issues after upgrading, try:

npm uninstall -g purgetss && npm install -g purgetss

:::tip NEW PROJECT: Clean Up Default app.tss For new projects created with

purgetss create

, the default

app/styles/app.tss

contains a large commented template.

You can safely DELETE this file - PurgeTSS will regenerate it on the first build with only the classes you actually use, and create a clean

_app.tss

backup.

This prevents carrying around unnecessary commented code and ensures a fresh start. :::

```
tailwind.tss
```
重命名为
```
utilities.tss
```
（请更新所有相关脚本和引用）。
XML语法验证现在会在处理前运行，并报告行级错误（例如，缺失
```
<
```
）。
```
deviceInfo()
```
在Alloy和Classic模式下均可工作（不再依赖
```
Alloy.isTablet
```
/
```
Alloy.isHandheld
```
）。
需要Node.js 20+版本。
支持Font Awesome 7，包括新的
```
--fa:
```
CSS自定义属性。
VS Code推荐使用
```
KevinYouu.tailwind-raw-reorder-tw4
```
扩展进行类排序。

如果升级后遇到问题，尝试执行：

npm uninstall -g purgetss && npm install -g purgetss

。

:::tip 新项目：清理默认app.tss 使用

purgetss create

创建的新项目中，默认的

app/styles/app.tss

包含大量注释模板。

你可以安全地删除该文件 - PurgeTSS会在首次构建时重新生成它，仅包含你实际使用的类，并创建干净的

_app.tss

备份。

这样可以避免携带不必要的注释代码，确保全新的开始。 :::

Critical Rules (Low Freedom)

关键规则（严格遵守）

⭐ PREFER

$.UI.create()

for Dynamic Components

⭐ 优先使用

$.UI.create()

创建动态组件

:::tip RECOMMENDED FOR DYNAMIC COMPONENTS When creating components dynamically in Controllers, use
$.UI.create()
instead of
Ti.UI.create()
to get full PurgeTSS utility class support:

javascript

// ✅ RECOMMENDED - Full PurgeTSS support
const view = $.UI.create('View', {
  classes: ['w-screen', 'h-auto', 'bg-white', 'rounded-lg']
})

// ❌ AVOID - No PurgeTSS classes
const view = Ti.UI.createView({
  width: Ti.UI.FILL,
  height: Ti.UI.SIZE,
  backgroundColor: '#ffffff',
  borderRadius: 8
})

See Dynamic Component Creation for complete guide. :::

:::tip 推荐用于动态组件在控制器中动态创建组件时，请使用
$.UI.create()
而非
Ti.UI.create()
，以获得完整的PurgeTSS实用类支持：

javascript

// ✅ 推荐 - 完整支持PurgeTSS
const view = $.UI.create('View', {
  classes: ['w-screen', 'h-auto', 'bg-white', 'rounded-lg']
})

// ❌ 避免 - 不支持PurgeTSS类
const view = Ti.UI.createView({
  width: Ti.UI.FILL,
  height: Ti.UI.SIZE,
  backgroundColor: '#ffffff',
  borderRadius: 8
})

完整指南请参见动态组件创建。 :::

🚨 RESPECT USER FILES

🚨 尊重用户文件

NEVER delete any existing
.tss
files (like

index.tss

detail.tss

) or other project files without explicit user consent.

How to handle migration to PurgeTSS:

ONLY replace custom classes with PurgeTSS utility classes if the user explicitly requests it.
When requested:
- Analyze the definitions in the existing
```
.tss
```
  files.
- Update the XML/Controller components with equivalent PurgeTSS utility classes.
- WAIT for user confirmation before suggesting or performing any file deletion.
If the user prefers keeping manual
```
.tss
```
files for specific styles, respect that choice and only use PurgeTSS for new or requested changes.

未经用户明确同意，切勿删除任何现有的
.tss
文件（如

index.tss

、

detail.tss

）或其他项目文件。

迁移到PurgeTSS的处理方式：

仅在用户明确要求时，才将自定义类替换为PurgeTSS实用类。
当用户提出请求时：
- 分析现有
```
.tss
```
  文件中的定义。
- 用等效的PurgeTSS实用类更新XML/控制器组件。
- 等待用户确认后，再建议或执行任何文件删除操作。
如果用户偏好为特定样式保留手动
```
.tss
```
文件，请尊重该选择，仅在新内容或用户要求的更改中使用PurgeTSS。

🚨 NO FLEXBOX - Titanium Doesn't Support It

🚨 不支持Flexbox - Titanium不兼容

:::danger FLEXBOX CLASSES DO NOT EXIST The following are NOT supported:

❌
```
flex
```
,
```
flex-row
```
,
```
flex-col
```

❌

justify-between

justify-center

justify-start

justify-end

❌
```
items-center
```
for alignment (exists but sets
```
width/height: FILL
```
)

Use Titanium layouts instead:

✅
```
horizontal
```
- Children left to right
✅
```
vertical
```
- Children top to bottom
✅ Omit layout class - Defaults to
```
composite
```
(absolute positioning)

:::tip CRITICAL: Understanding Layout Composition When building complex UIs, carefully choose the layout mode for each container:

vertical
- Stack elements top to bottom (most common):

xml

<ScrollView class="vertical">
  <View class="mb-4">Item 1</View>
  <View class="mb-4">Item 2</View>
  <View>Item 3</View>
</ScrollView>

horizontal
- Arrange elements left to right:

xml

<View class="horizontal w-screen">
  <Label text="Left" />
  <View class="w-screen" />  <!-- Spacer -->
  <Label text="Right" />
</View>

composite
(default) - Absolute positioning with

top

left

, etc.:

xml

<View class="h-screen w-screen">
  <View class="wh-12 absolute left-0 top-0 bg-red-500" />
  <View class="wh-12 absolute bottom-0 right-0 bg-blue-500" />
</View>

Common Issue: If you see elements appearing in unexpected positions (e.g., a header bar "behind" content), check if parent containers have conflicting layout modes. Each container's layout affects its direct children only. :::

:::danger Flexbox类不存在以下内容不被支持：

❌
```
flex
```
,
```
flex-row
```
,
```
flex-col
```

❌

justify-between

justify-center

justify-start

justify-end

❌
```
items-center
```
用于对齐（虽存在但会设置
```
width/height: FILL
```
）

请使用Titanium布局替代：

✅
```
horizontal
```
- 子元素从左到右排列
✅
```
vertical
```
- 子元素从上到下排列
✅ 省略布局类 - 默认使用
```
composite
```
（绝对定位）

:::tip 重要提示：理解布局组合构建复杂UI时，请仔细为每个容器选择布局模式：

vertical
- 元素从上到下堆叠（最常用）：

xml

<ScrollView class="vertical">
  <View class="mb-4">项目1</View>
  <View class="mb-4">项目2</View>
  <View>项目3</View>
</ScrollView>

horizontal
- 元素从左到右排列：

xml

<View class="horizontal w-screen">
  <Label text="左侧" />
  <View class="w-screen" />  <!-- 占位符 -->
  <Label text="右侧" />
</View>

composite
（默认）- 使用

top

、

left

等进行绝对定位：

xml

<View class="h-screen w-screen">
  <View class="wh-12 absolute left-0 top-0 bg-red-500" />
  <View class="wh-12 absolute bottom-0 right-0 bg-blue-500" />
</View>

常见问题： 如果元素出现在意外位置（例如，标题栏“在”内容后面），请检查父容器是否有冲突的布局模式。每个容器的布局仅影响其直接子元素。 :::

🚨 PLATFORM-SPECIFIC PROPERTIES REQUIRE MODIFIERS

🚨 平台专属属性需要修饰符

:::danger CRITICAL: Platform-Specific Properties Require Modifiers Using

Ti.UI.iOS.*

Ti.UI.Android.*

properties WITHOUT platform modifiers causes cross-platform compilation failures.

WRONG - Adds iOS code to Android (causes failure):

tss

// ❌ BAD - Adds Ti.UI.iOS to Android project
"#mainWindow": {
  statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
}

CORRECT - Use platform modifiers in TSS:

tss

// ✅ GOOD - Only adds to iOS
"#mainWindow[platform=ios]": {
  statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
}

OR use PurgeTSS platform modifier classes:

xml

<!-- ✅ GOOD - Platform-specific classes -->
<Window class="ios:status-bar-light android:status-bar-dark">

Properties that ALWAYS require platform modifiers:

iOS:

statusBarStyle

modalStyle

modalTransitionStyle

systemButton

Android:
```
actionBar
```
configuration
ANY
```
Ti.UI.iOS.*
```
,
```
Ti.UI.Android.*
```
constant

When suggesting platform-specific code:

Check if user's project supports that platform
ALWAYS use
```
[platform=ios]
```
or
```
[platform=android]
```
TSS modifier
OR use PurgeTSS platform classes like
```
ios:bg-blue-500
```

For complete reference on platform modifiers, see Platform Modifiers. :::

:::danger 重要提示：平台专属属性需要修饰符使用

Ti.UI.iOS.*

或

Ti.UI.Android.*

属性如果不添加平台修饰符，会导致跨平台编译失败。

错误示例 - 向Android项目添加iOS代码（导致失败）：

tss

// ❌ 错误 - 向Android项目添加Ti.UI.iOS代码
"#mainWindow": {
  statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
}

正确示例 - 在TSS中使用平台修饰符：

tss

// ✅ 正确 - 仅添加到iOS
"#mainWindow[platform=ios]": {
  statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
}

或使用PurgeTSS平台修饰符类：

xml

<!-- ✅ 正确 - 平台专属类 -->
<Window class="ios:status-bar-light android:status-bar-dark">

始终需要平台修饰符的属性：

iOS:

statusBarStyle

modalStyle

modalTransitionStyle

systemButton

Android:
```
actionBar
```
配置
任何
```
Ti.UI.iOS.*
```
、
```
Ti.UI.Android.*
```
常量

建议平台专属代码时：

检查用户项目是否支持该平台
务必使用
```
[platform=ios]
```
或
```
[platform=android]
```
TSS修饰符
或使用PurgeTSS平台类，如
```
ios:bg-blue-500
```

平台修饰符的完整参考请参见 平台修饰符。 :::

Other Mandatory Rules

其他强制规则

NO
p-
padding classes: Titanium does NOT support a native
```
padding
```
property on
```
View
```
,
```
Window
```
,
```
ScrollView
```
, or
```
TableView
```
. Always use margins on children (
```
m-
```
) to simulate internal spacing.
View defaults to
SIZE
: Use
```
w-screen
```
/
```
h-screen
```
to fill space when needed.
rounded-full
: To get a perfect circle, use
```
rounded-full-XX
```
(where XX is the width/height of the square element).
rounded-full-XX
includes size: These classes already set
```
width
```
,
```
height
```
, and
```
borderRadius
```
. Do not add
```
w-XX h-XX
```
/
```
wh-XX
```
unless you need to override.
m-xx
on FILL elements: Adding
```
m-4
```
to a
```
w-screen
```
element pins it to all four edges (top, bottom, left, right). This will stretch the component vertically to fill the parent unless you explicitly add
```
h-auto
```
(
```
Ti.UI.SIZE
```
) to constrain it to its content.
w-XX
+
h-XX
→
wh-XX
: If both width and height use the same scale value, prefer a single
```
wh-XX
```
(order doesn't matter:
```
w-10 h-10
```
and
```
h-10 w-10
```
are equivalent).
Use
wh-
shortcuts: PurgeTSS provides a complete scale of combined width/height utilities:
- Numeric Scale:
```
wh-0
```
  to
```
wh-96
```
  (e.g.,
```
wh-16
```
  sets both to 64px).
- Fractions:
```
wh-1/2
```
  ,
```
wh-3/4
```
  , up to
```
wh-11/12
```
  for proportional sizing.
- Special Values:
```
wh-auto
```
  (explicit
```
SIZE
```
  ),
```
wh-full
```
  (
```
100%
```
  ), and
```
wh-screen
```
  (
```
FILL
```
  ).
- Using these instead of separate
```
w-
```
  and
```
h-
```
  classes improves XML readability and reduces generated TSS size.

:::tip LAYOUT TIP: EDGE PINNING If using margins (

m-

) causes your

Label

Button

to stretch unexpectedly, it is due to Titanium's Edge Pinning rule (2 opposite pins = computed dimension). Use the

wh-auto

class to explicitly force

SIZE

behavior and prevent stretching. :::

NEVER add
composite
class explicitly - That's the default, use
```
horizontal
```
/
```
vertical
```
when needed
Arbitrary values use parentheses:
```
w-(100px)
```
,
```
bg-(#ff0000)
```
- NO square brackets
mode: 'all'
required in
```
config.cjs
```
for Ti Elements styling
Classes use
kebab-case
:
```
.my-class
```
, IDs use
```
camelCase
```
:
```
#myId
```

禁止使用
p-
内边距类：Titanium在
```
View
```
、
```
Window
```
、
```
ScrollView
```
或
```
TableView
```
上不支持原生
```
padding
```
属性。请始终使用子元素的外边距（
```
m-
```
）来模拟内部间距。
View默认尺寸为
SIZE
：需要填充空间时使用
```
w-screen
```
/
```
h-screen
```
。
rounded-full
：要实现完美圆形，请使用
```
rounded-full-XX
```
（XX为方形元素的宽/高）。
rounded-full-XX
包含尺寸设置：这些类已设置
```
width
```
、
```
height
```
和
```
borderRadius
```
。除非需要覆盖，否则请勿添加
```
w-XX h-XX
```
/
```
wh-XX
```
。
FILL元素上的
m-xx
：向
```
w-screen
```
元素添加
```
m-4
```
会将其固定到四个边缘（上、下、左、右）。除非你显式添加
```
h-auto
```
（
```
Ti.UI.SIZE
```
）来限制其仅适应内容，否则这会垂直拉伸组件以填充父容器。
w-XX
+
h-XX
→
wh-XX
：如果宽度和高度使用相同的比例值，优先使用单个
```
wh-XX
```
（顺序无关：
```
w-10 h-10
```
和
```
h-10 w-10
```
等效）。
使用
wh-
快捷类：PurgeTSS提供完整的宽高组合实用类：
- 数值比例：
```
wh-0
```
  到
```
wh-96
```
  （例如，
```
wh-16
```
  将宽和高都设置为64px）。
- 分数比例：
```
wh-1/2
```
  、
```
wh-3/4
```
  ，最高到
```
wh-11/12
```
  用于比例尺寸设置。
- 特殊值：
```
wh-auto
```
  （显式
```
SIZE
```
  ）、
```
wh-full
```
  （
```
100%
```
  ）和
```
wh-screen
```
  （
```
FILL
```
  ）。
- 使用这些类替代单独的
```
w-
```
  和
```
h-
```
  类，可提高XML可读性并减小生成的TSS文件大小。

:::tip 布局技巧：边缘固定如果使用外边距（

m-

）导致

Label

或

Button

意外拉伸，这是由于Titanium的边缘固定规则（两个相对边缘固定 = 计算尺寸）。请使用

wh-auto

类显式强制

SIZE

行为，防止拉伸。 :::

切勿显式添加
composite
类 - 这是默认值，需要时使用
```
horizontal
```
/
```
vertical
```
任意值使用括号：
```
w-(100px)
```
、
```
bg-(#ff0000)
```
- 请勿使用方括号
**在
```
config.cjs
```
中需要设置
```
mode: 'all'
```
**以支持Ti元素样式
类使用短横线命名法：
```
.my-class
```
，ID使用驼峰命名法：
```
#myId
```

Common Anti-Patterns

常见反模式

WRONG:

xml

<View class="flex-row justify-between">  <!-- Flexbox doesn't exist -->
<View class="p-4">  <!-- No padding on Views -->
<View class="composite">  <!-- Never add composite explicitly -->

CORRECT:

xml

<View class="horizontal">
<View class="m-4">  <!-- Use margins on children -->
<View>  <!-- Omit layout = composite by default -->

WRONG (Dynamic Components):

javascript

// Manual styling with Ti.UI.create()
const view = Ti.UI.createView({
  width: Ti.UI.FILL,
  backgroundColor: '#fff',
  borderRadius: 8
})

CORRECT (Dynamic Components):

javascript

// PurgeTSS classes with $.UI.create()
const view = $.UI.create('View', {
  classes: ['w-screen', 'bg-white', 'rounded-lg']
})

错误示例：

xml

<View class="flex-row justify-between">  <!-- Flexbox不存在 -->
<View class="p-4">  <!-- View不支持内边距 -->
<View class="composite">  <!-- 切勿显式添加composite -->

正确示例：

xml

<View class="horizontal">
<View class="m-4">  <!-- 使用子元素的外边距 -->
<View>  <!-- 省略布局类，默认使用composite -->

错误示例（动态组件）：

javascript

// 使用Ti.UI.create()手动设置样式
const view = Ti.UI.createView({
  width: Ti.UI.FILL,
  backgroundColor: '#fff',
  borderRadius: 8
})

正确示例（动态组件）：

javascript

// 使用PurgeTSS类和$.UI.create()
const view = $.UI.create('View', {
  classes: ['w-screen', 'bg-white', 'rounded-lg']
})

Class Verification Workflow

类验证工作流程

:::danger CRITICAL: VERIFY CLASSES BEFORE SUGGESTING NEVER guess or hallucinate classes based on other CSS Frameworks knowledge!

PurgeTSS shares naming with some CSS Frameworks but has DIFFERENT classes for Titanium. Always verify a class exists before suggesting it. :::

:::danger 重要提示：建议前务必验证类 切勿基于其他CSS框架的知识猜测或虚构类！

PurgeTSS与部分CSS框架命名相似，但针对Titanium有不同的类。建议前务必验证类是否存在。 :::

Verification Steps

验证步骤

Check if it's a KNOWN anti-pattern
- See PROHIBITED Classes
- Common mistakes:
```
flex-row
```
  ,
```
justify-between
```
  ,
```
p-4
```
  on Views (p-* not supported on Views)
Check the Class Index
- See Class Index for available patterns
- Constant properties like
```
keyboard-type-*
```
  ,
```
return-key-type-*
```
  have dedicated classes

Search the project when unsure

bash

# Search for a class pattern in the project's utilities.tss
grep -E "keyboard-type-" ./purgetss/styles/utilities.tss
grep -E "return-key-type-" ./purgetss/styles/utilities.tss
grep -E "^'bg-" ./purgetss/styles/utilities.tss

After making changes
- Check
```
app.tss
```
  for "Unused or unsupported classes" section at the end
- Report any typos or non-existent classes to the user

检查是否为已知反模式
- 参见禁止使用的类
- 常见错误：
```
flex-row
```
  、
```
justify-between
```
  、View上的
```
p-4
```
  （View不支持p-*类）
检查类索引
- 参见类索引获取可用模式
- 常量属性如
```
keyboard-type-*
```
  、
```
return-key-type-*
```
  有专属类

不确定时搜索项目

bash

# 在项目的utilities.tss中搜索类模式
grep -E "keyboard-type-" ./purgetss/styles/utilities.tss
grep -E "return-key-type-" ./purgetss/styles/utilities.tss
grep -E "^'bg-" ./purgetss/styles/utilities.tss

修改后
- 检查
```
app.tss
```
  末尾的“未使用或不支持的类”部分
- 向用户报告任何拼写错误或不存在的类

What HAS Classes vs What DOESN'T

有类与无类的对比

Has Classes in PurgeTSS	Does NOT Have Classes
`keyboard-type-email`	`hintText` (use attribute)
`return-key-type-next`	`passwordMask` (use attribute)
`text-center`	`autocorrect` (use attribute)
`bg-blue-500`	`autocapitalization` (use attribute)
`w-screen`	`flex-row` → use `horizontal`
`wh-16`	`justify-between` → use margins
`rounded-lg`	`w-full` → use `w-screen`
`m-4` , `gap-4`	`p-4` on View → use `m-4` on children

:::tip When in doubt, prefer using the search command above to verify. It's better to spend 5 seconds verifying than suggesting a class that doesn't exist and will appear in the "unused classes" warning. :::

PurgeTSS中有对应类	无对应类的内容
`keyboard-type-email`	`hintText` （使用属性）
`return-key-type-next`	`passwordMask` （使用属性）
`text-center`	`autocorrect` （使用属性）
`bg-blue-500`	`autocapitalization` （使用属性）
`w-screen`	`flex-row` → 使用 `horizontal`
`wh-16`	`justify-between` → 使用外边距
`rounded-lg`	`w-full` → 使用 `w-screen`
`m-4` , `gap-4`	View上的 `p-4` → 使用子元素的 `m-4`

:::tip 不确定时，优先使用上述搜索命令验证。花5秒验证比建议不存在的类并导致“未使用类”警告要好得多。 :::

Reference Guides

参考指南

Load these only when needed:

仅在需要时加载以下内容：

Essential References

核心参考

Class Index - Quick patterns, prohibited classes, verification commands (LOAD FIRST when unsure about a class)
Dynamic Component Creation -
```
$.UI.create()
```
and
```
Alloy.createStyle()
```
for creating components in Controllers (READ FIRST for dynamic components)

类索引 - 快速模式、禁止使用的类、验证命令（对类有疑问时首先加载）
动态组件创建 - 在控制器中使用
```
$.UI.create()
```
和
```
Alloy.createStyle()
```
创建组件（动态组件相关内容首先阅读）

Setup & Configuration

设置与配置

Installation & Setup - First run, VS Code, LiveView
CLI Commands - All
```
purgetss
```
commands
Migration Guide - Migrating existing apps from manual TSS to PurgeTSS

安装与设置 - 首次运行、VS Code、LiveView
CLI命令 - 所有
```
purgetss
```
命令
迁移指南 - 将现有应用从手动TSS迁移到PurgeTSS

Customization

自定义

Deep Customization - config.cjs, colors, spacing, Ti Elements
Custom Rules - Styling Ti Elements, IDs, classes
Apply Directive - Extracting utility combinations
Configurable Properties - All 80+ customizable properties

深度自定义 - config.cjs、颜色、间距、Ti元素
自定义规则 - Ti元素、ID、类的样式设置
Apply指令 - 提取实用类组合
可配置属性 - 80+可自定义属性

Layout & Styling

布局与样式

UI/UX Design Patterns - Complete guide to mobile UI components with PurgeTSS (cards, lists, forms, buttons, navigation, modals, accessibility)
Grid Layout System - 12-column grid, responsive layouts
Smart Mappings - How gap, shadows, and grid work under the hood
Arbitrary Values - Parentheses notation for custom values
Platform Modifiers - ios:, android:, tablet:, handheld:
Opacity Modifier - Color transparency with /50 syntax
Titanium Resets - Default styles for Ti elements

UI/UX设计模式 - 使用PurgeTSS构建移动UI组件的完整指南（卡片、列表、表单、按钮、导航、模态框、无障碍）
网格布局系统 - 12列网格、响应式布局
智能映射 - 间距、阴影和网格的底层工作原理
任意值 - 使用括号表示法设置自定义值
平台修饰符 - ios:, android:, tablet:, handheld:
透明度修饰符 - 使用/50语法设置颜色透明度
Titanium重置样式 - Ti元素的默认样式

Performance

性能

Performance Tips - Optimizing PurgeTSS apps (bridge crossings, ListView, animations)

性能优化技巧 - 优化PurgeTSS应用（桥接调用、ListView、动画）

Components

组件

TiKit UI Components - Ready-to-use Alerts, Avatars, Buttons, Cards, Tabs built with PurgeTSS

TiKit UI组件 - 使用PurgeTSS构建的即用型警告框、头像、按钮、卡片、标签页

Fonts & Animations

字体与动画

Icon Fonts - Font Awesome 7, Material Icons, custom icon libraries
Animation Component - Declarative
```
<Animation>
```
API

:::tip TEXT FONTS (Google Fonts, Roboto, etc.) For text fonts, see CLI Commands → build-fonts. :::

图标字体 - Font Awesome 7、Material Icons、自定义图标库
动画组件 - 声明式
```
<Animation>
```
API

:::tip 文本字体（Google Fonts、Roboto等）文本字体相关内容请参见CLI命令 → build-fonts。 :::

Examples

示例

For complete WRONG vs CORRECT examples including:

Titanium layout patterns (horizontal, vertical, composite)
Grid with percentages
Gap usage
Manual .tss anti-patterns
Dynamic component creation with
```
$.UI.create()
```
and
```
Alloy.createStyle()
```

See EXAMPLES.md and Dynamic Component Creation

完整的错误与正确示例包括：

Titanium布局模式（horizontal、vertical、composite）
百分比网格
间距使用
手动.tss反模式
使用
```
$.UI.create()
```
和
```
Alloy.createStyle()
```
创建动态组件

请参见EXAMPLES.md和动态组件创建

Task	Use This Skill
Project architecture, services, controllers	`ti-expert`
Complex UI components, ListViews, gestures	`ti-ui`
Alloy MVC concepts, data binding, TSS syntax	`alloy-guides`
Native features (camera, location, push)	`ti-howtos`

任务	使用技能
项目架构、服务、控制器	`ti-expert`
复杂UI组件、ListView、手势	`ti-ui`
Alloy MVC概念、数据绑定、TSS语法	`alloy-guides`
原生功能（相机、定位、推送）	`ti-howtos`

purgetss

Original

Translation

PurgeTSS Expert

PurgeTSS 专家指南

Project Detection

项目检测

Core Workflow

核心工作流程

Project Structure

项目结构

Understanding app.tss vs _app.tss

理解app.tss与_app.tss的区别

Checking for Unused/Unsupported Classes

检查未使用/不支持的类

How utilities.tss Works

utilities.tss的工作原理

Quick Start

快速开始

-d: Install dev dependencies (ESLint, Tailwind)

-d: 安装开发依赖（ESLint, Tailwind）

-v: Copy icon fonts (fa, mi, ms, f7)

-v: 复制图标字体（fa, mi, ms, f7）

What's New in v7.3.x

v7.3.x版本新特性

Critical Rules (Low Freedom)

关键规则（严格遵守）

⭐ PREFER $.UI.create() for Dynamic Components

⭐ 优先使用$.UI.create()创建动态组件

🚨 RESPECT USER FILES

🚨 尊重用户文件

🚨 NO FLEXBOX - Titanium Doesn't Support It

🚨 不支持Flexbox - Titanium不兼容

🚨 PLATFORM-SPECIFIC PROPERTIES REQUIRE MODIFIERS

🚨 平台专属属性需要修饰符

Other Mandatory Rules

其他强制规则

Common Anti-Patterns

常见反模式

Class Verification Workflow

类验证工作流程

Verification Steps

验证步骤

What HAS Classes vs What DOESN'T

有类与无类的对比

Reference Guides

参考指南

Essential References

核心参考

Setup & Configuration

设置与配置

Customization

自定义

Layout & Styling

布局与样式

Performance

性能

Components

组件

Fonts & Animations

字体与动画

Examples

示例

Related Skills

相关技能

Understanding
`app.tss`
vs
`_app.tss`

理解
`app.tss`
与
`_app.tss`
的区别

How
`utilities.tss`
Works

⭐ PREFER
`$.UI.create()`
for Dynamic Components

⭐ 优先使用
`$.UI.create()`
创建动态组件