Olive CSS：Lisp 驱动的类 Tailwind 纯 CSS 工具类框架

# olive-css 源码地址：https://codeberg.org/jjba23/olive-css - [授权协议](https://codeberg.org/jjba23/olive-css#user-content-headline-1) - [安装与使用](https://codeberg.org/jjba23/olive-css#user-content-headline-2) - [定制 Olive CSS](https://codeberg.org/jjba23/olive-css#user-content-headline-3) - [设计哲学](https://codeberg.org/jjba23/olive-css#user-content-headline-4) - [使用 Olive CSS 的项目](https://codeberg.org/jjba23/olive-css#user-content-headline-5) - [行为准则](https://codeberg.org/jjba23/olive-css#user-content-headline-6) - [Olive CSS 项目](https://codeberg.org/jjba23/olive-css#user-content-headline-7) - [与 Tailwind CSS 对比](https://codeberg.org/jjba23/olive-css#user-content-headline-8) - [故障排查](https://codeberg.org/jjba23/olive-css#user-content-headline-9) https://jointhefreeworld.org/ggg/dist/scheme-guile.svg https://jointhefreeworld.org/ggg/dist/gnu-guix.svg https://jointhefreeworld.org/ggg/dist/maak.svg https://jointhefreeworld.org/ggg/dist/license-lgpl3+.svg https://jointhefreeworld.org/ggg/dist/license-fdl13+.svg *受 Tailwind 语法启发的纯 CSS 工具类框架，易学易改，用 Lisp（Guile Scheme）写成* 任何 Web 项目都能用，无论是否用 Scheme，可作为 Tailwind 的“近似”替代品。 本项目采用 GNU Lesser General Public License v3 或更新版本授权。 更多特性与语法见文档：/jjba23/olive-css/src/branch/trunk/docs/olive/olive.org（[在线浏览](https://codeberg.org/jjba23/olive-css/src/branch/trunk/docs/olive/olive.org)） Guile Scheme API 技术文档：[https://jointhefreeworld.org/api-docs/olive-css/API.html](https://jointhefreeworld.org/api-docs/olive-css/API.html) 像其他工具类框架一样使用： ```html <p class="text-green-600">Hello Olive CSS!</p> ``` 如果喜欢我的作品，请[请我喝杯咖啡☕](https://bmc.link/jjbigorra)支持，让我保持动力！ --- ## 授权协议 olive-css 及其全部源码均为自由软件，采用 GNU Lesser General Public License v3（或你方便的新版本）授权。 [https://www.gnu.org/licenses/lgpl-3.0.html](https://www.gnu.org/licenses/lgpl-3.0.html) 展示站、文档与示例（含本文）采用 GNU Free Documentation License v1.3（或你方便的新版本）授权。 [https://www.gnu.org/licenses/fdl-1.3.html](https://www.gnu.org/licenses/fdl-1.3.html) --- https://jointhefreeworld.org/static-assets/olive-css/olive-css-new-small.png --- ## 安装与使用 下载预编译版本（位于 `resources/css/`）或自行构建，然后通过 HTTP 服务，并在 HTML 的 `<link>` 标签引入即可。 **关于体积**：默认 `olive.min.css` 包含全部类、变体与媒体查询，体积较大。上线前建议按需禁用功能，生成优化后的定制版本。 影响体积的主要因素：颜色数量、断点/媒体查询数量。经验法则：若不用 `xl` 或 `2xl` 断点，可关闭；仅保留所需颜色。 Guile Scheme 的 `parameterize` 语法让这一切非常简单，也可关闭暗黑模式以显著减小体积。详见 `scripts/olive-css-gen.scm`。 同时请确保 Web 服务器开启 GZIP/Brotli 压缩并正确缓存 CSS。 ### 定制 Olive CSS 定制是一等公民。借助 Guile Scheme，可开关功能、调整尺寸与颜色，并轻松添加自己的工具类。 关键定制点： - 选择需要的断点（`sm`、`md`、`lg`、`xl`、`2xl`） - 用 `parameterize` 开关暗黑模式 - 自定义调色板，仅保留项目所需颜色 也可用 `addmq` 与 `addhover` 生成自己的响应式或悬停变体。 参考 `scripts/olive-css-gen.scm`、`src/olive-css/main.scm` 及 API 文档。 --- ## 设计哲学 Olive CSS 不是又一个 Tailwind 克隆，只是受其启发，设计原则如下： **可 Hack** 用 Scheme 代码即可扩展或修改任意部分。 **自由** 100% 自由软件，LGPLv3+ 与 FDL 1.3+ 授权。 **自给自足** 依赖极少，构建轻快。 **表达力** 轻松添加**任意** CSS 特性及自定义调色板/规则。 它鼓励学习与实验，而非把复杂性藏在僵硬的工具链后面。 --- ## 使用 Olive CSS 的项目 ## 行为准则 本项目遵循 jointhefreeworld 行为准则： [https://jointhefreeworld.org/blog/articles/personal/jointhefreeworld-code-of-conduct/index.html](https://jointhefreeworld.org/blog/articles/personal/jointhefreeworld-code-of-conduct/index.html) 简言之：我们营造包容、尊重、协作的环境，以 GNU 项目的自由、平等、社区理念为指导，相信相互尊重的协作是创造优秀自由软件的关键。 --- ## Olive CSS 项目 为自由软件做贡献是一种体现慷慨、协作与赋能的美好行为。我们欢迎所有人加入 olive-css 项目，鼓励以各种形式积极参与：改进代码、提建议、头脑风暴、提升模块化/灵活性等。随时联系我聊天、讨论或反馈！ Backlog 与看板： [https://lucidplan.jointhefreeworld.org/tickets/olive-css](https://lucidplan.jointhefreeworld.org/tickets/olive-css) --- ## 与 Tailwind CSS 对比 | 特性 | Tailwind CSS | Olive CSS | |---|---|---| | 实现语言 | JavaScript | λ Guile Scheme | | 定制能力 | 一般（靠配置） | ✔️ 极强（代码级 DSL） | | 函数式 API | ❌ | ✔️ | | 自由软件 | ❌（MIT，非 copyleft） | ✔️（LGPL v3+ 与 FDL） | | 输出控制 | 有限，JIT 受限 | 完全按需生成 | 若你需要完全自由、可 Hack、高表达力且透明的 Tailwind 替代品，Olive CSS 是理想选择。 --- ## 故障排查 **输出体积过大** 在构建脚本里禁用未使用的断点、变体或颜色。 **找不到类** 添加类逻辑后需重新生成构建。 **暗黑模式无效** 确保 HTML 元素有 `data-theme="dark"`，且构建时包含暗黑查询。 **CSS 无效** 检查自定义规则定义，尤其 oklch 颜色格式。