# 为小程序开发而生的插件weapp-tailwindcss

*Published:* 2024-02-18
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年2月18日，已超过 180天没有更新



[![](https://www.xarjtc.com/wp-content/uploads/2024/02/c685783773f01a1f144d4a60e1b33700.webp)](https://www.xarjtc.com/wp-content/uploads/2024/02/c685783773f01a1f144d4a60e1b33700.webp)

[weapp-tailwindcss](https://www.xarjtc.com/tag/weapp-tailwindcss "查看weapp-tailwindcss此标签更多文章") 是一系列专门为[小程序](https://www.xarjtc.com/tag/%e5%b0%8f%e7%a8%8b%e5%ba%8f "查看小程序此标签更多文章")开发而生的插件，主要解决在小程序中使用 tailwindcss 的问题，提升开发效率的全方面解决方案。

在小程序开发中，由于小程序本身有自己的一套 独特的 技术规范标准。这导致你无法使用web中很多的特性，你也无法 直接 使用像 tailwindcss 这种库。

而 weapp-tailwindcss, 就能让你，在小程序开发中使用 tailwindcss 大部分 特性。

它支持目前上所有使用 webpack 和 vite 的主流多端小程序框架和使用 webpack / gulp的原生小程序打包方式。

你可以很容易在各个框架，或原生开发中集成 tailwindcss。

本质上它是一个转义器，负责把 tailwindcss 中所采集的类名，以及生成的结果，转化成小程序中可以编译的方式。

tailwindcss 是一款原子化的样式生成器，特点是所写即所得，可读性很好，能够自动摇树优化没有用到的样式，也能通过插件和预设提炼项目公共的样式部分，在前端领域非常受欢迎。weapp-tailwindcss 项目的作者是 sonofmagic ，他在2021 年接触到了 tailwindcss 后非常喜欢，并且开始在很多项目中使用。

后来他发现在小程序中没法直接使用像 tailwindcss 这样的 web 库，所以就产生了开发 weapp-tailwindcss 的想法，发布后也很受欢迎，截止本文发文的2024年2月中旬，已经得到了 833 Star！

**技术特色：**

- 不但可以处理和转义 wxml/wxss , 还能处理 js 和 wxs 产物 (以微信小程序为例)
- 提供多种使用方式，方便项目集成，包括 webpack/vite/gulp 和 nodejs api
- 生态以及解决方案丰富，提供大量现成模板，可以利用许多 tailwindcss 现有的生态来构建小程序。
- 高效的解析和缓存机制，项目即使很大，热更新响应时间也是毫秒级
- 贴合 tailwindcss 的设计思路，智能提示友好

**在线网址：https://weapp-tw.icebreaker.top/**

GitHub地址：https://github.com/sonofmagic/weapp-tailwindcss