Tailwind CSS，在 Web 开发领域，已经成为各种框架、开发人员标配；已经有大量实例证明，基于 Tailwind CSS 来编写样式，可以为开发者节省诸多时间；而且，能够优化减小代码体积、提升运行性能，是非常棒的技术套件。 快应用 开发，同样基于 Web 技术栈，理论上也完全可以使用 Tailwind CSS；在实际开发过程中，该如何使用 Tailwind CSS 呢？本文旨在对此做些许分享。
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板的类名，生成相应的样式，然后将它们写入静态 CSS 文件。它快速、灵活、可靠，且运行时间为零。官方提供 Tailwind CLI 、PostCSS、Play CDN 等使用方式；下面主要讲下如何基于 Tailwind CLI 方式，在应用开发中使用 Tailwind CSS：
Tailwind CSS 是一种现代的 CSS 框架，它提供了一组预定义的 CSS 类，用于快速开发现代 Web 应用程序。Tailwind 的核心理念是为开发者提供一种灵活的方法来构建自定义的 UI 组件，而不需要编写大量的 CSS 代码。
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板的类名，生成相应的样式，然后将它们写入静态 CSS 文件。它快速、灵活、可靠，且运行时间为零。
Tailwind CSS：当今最流行 CSS 框架；相信借助其巧妙设计、结合强大生态，您也会偏爱用它来塑造 UI；如果必须要手动编码：那无需频繁滚动编辑区，无需于 template 与 style 之间横跳，无需绞尽脑汁为类命名，无需再编写重复的 CSS……是多么美妙。
|
|
这是看起来路径简短的方式，实际上这个 input.css 和 output.css，无论是名字，或是它存在的路径，皆可以自行指定，您可以按照自己喜欢的方式、或是团队约定俗成的形式；譬如统一存放在：src/assets/styles 目录下。
需要补充说明的是：在团队开发中，输入上述命令，略显繁琐，可以在 package.json 注入命令（如下示例）；如此以下，您只需在「终端」运行 pnpm tailwindcss 或 npm run tailwindcss 命令即可。
需要补充说明的是，使用 Tailwind CSS 并不破坏您原来的 CSS 书写✍🏻方式；您完全可以结合喜欢的预处理器（如 Sass、Less、Stylus），来共同工作，而无需做更多设置（如下代码示例）；但我以为当您熟悉 Tailwind CSS 之后，大有可能也会“移情而别恋”。
您可以在应用开发工具的「扩展市场」，通过关键字 Tailwind 检索”Tailwind CSS IntelliSense“扩展——适用于 Visual Studio Code 的智能 Tailwind CSS 工具，用户提供自动完成、语法突出显示和 linting 等高级功能来增强 Tailwind 开发体验；略作适配即可支持 *.ux；详细设置，可参见： Tailwind CSS IntelliSense 。
默认情况下，编辑“字符串”内容时（例如在 JSX 属性值中），开发工具中不会触发完成。更新设置 editor.quickSuggestions 可能会改善您的体验：
Tailwind CSS 生态发展繁荣超乎想象，就连其衍生产品也不可胜数；如 Flowbite ——包含 600 多个 UI 组件、部分和页面的开源库进行开发，该库使用 Tailwind CSS 的实用程序类构建并在 Figma 中设计。它不仅能充当 Tailwind CSS 插件使用，也可以拷贝到项目直接使用，还可以在线查阅效果（支持多种屏幕设备类型），挑选匹配实现方案；在仍是基于组件树构建页面的时代，极大提升页面搭建效率。如： pagination 组件：
但在快应用开发过程中，却不能生效；因为 style-loader 的作用是将 CSS 注入 DOM，其中用到了诸多浏览器 API（document），而快应用的开发虽然是基于前端技术栈，但其运行环境止于 v8，实际的渲染是由 Android 底层完成，并未走浏览器这条路，因此无法工作。在构建工具优化、兼容之前，通过 style 标签中引入 CSS，成了主要选择。
Tailwind corePlugins 部分允许您完全禁用 Tailwind 通常默认生成的类（如果您的项目不需要它们）；这个设计对于快应用实在必要的紧，在上述示例中，对 text-opacity 等样式进行禁用，也是无奈之举。具体原因在于以下两点：
其一：快应用标准虽然基于 Web 技术栈，但只是 Web 标准子集，如蛮多 CSS 属性并不能很好的支持；其二：默认情况下，TailwindCSS 会将样式属性的值存储为 CSS 变量（例如 --tw-text-opacity），以便进行动态计算和响应式设计。
如此一来，在 template 中使用类 text-red-300、border-spacing-1，输出的便是如下 CSS；这样的写法，在快应用中并不能得到正确解析，也就无法起到期待效果，于是禁用便成了必须要做之事。当然，这样禁用也好处：利于输出更小提及的 CSS 文件。其他属性亦复如是。
在一般 Web 开发过程中，会将 base、components、utilities 等指令，都添加到 CSS 文件项目中；但，在快应用开发过程中，这无疑是累赘；因为它的存在，会使得 output.css 输出较多对项目没有裨益额外内容（如下代码所示），故而移除；这与通过 corePlugins 禁用基础样式（preflight）、禁用容器组件（container）作用类似。
修改长度单位从 rem 到 px，这也是不得已而为之。 快应用 标准对 长度单位 的支持，在 1070 及以下版本仅支持长度单位 px 和 %。从 1080 版本开始，新增了长度单位 dp。它无法支持 rem，就只能自定义设置为 px；在通过 theme 自定义长度单位，是 Tailwind CSS 官方提供的功能，以此能够实现更精细的样式控制；虽然操作不难，但属性较多、约定繁杂。后续时间如果允许，将探索 rem to px 批量转换插件来实现，以达到快速修改。如果您感兴趣，可以查阅 Tailwind CSS 完整版本配置—— config.full.js 。
在 Tailwind CSS 机制中，支持使用类名诸如 h-[100px] w-1/3 （对应生成 CSS 如下），然而，在快应用构建工具暂不支持这类名，于是乎这样写便不会生效，当然也不会造成什么问题；后续亟待打包工具优化。
在打包（Toolkit）未解决该问题之前，您可以手动写一个 class，或者使用内联样式（style）来兼容；在这种情况下，更推荐后者；因为引入 Tailwind CSS 的开发模式中，基本不用手写 class，即无需滚动到 style 标签或跳转 less、(s)css、文件，那么直接在 template 中使用内联更为便捷。
前文中提到，在 script 标签中 import CSS 资源，暂时未得到支持；但，在 style 标签中 @import 的 CSS 文件，被 A、B 两个页面（*.ux）引入，那么对应的 css 内容，就会被打入对应页面（即便有的内容没有被使用），从而导致代码体积略有增加（即便参考 如何优化「快应用」rpk 包体积？ 一文中的方法，也不可避免）。这是快应用构建本身存在的问题，使用 Tailwind CSS 也不例外。后续需要打包工具优化。
以上，就是在 快应用 开发过程中，引入 Tailwind CSS 所需的操作、以及常见问题说明。肯定还有异常更多情况没有考虑到，后续会逐步补充；如果您在实际运用过程中，欢请留言交流、反馈、分享。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。