{"id":16039946,"url":"https://github.com/sonofmagic/tailwindcss-miniprogram-preset","last_synced_at":"2025-10-17T22:01:54.487Z","repository":{"id":37423962,"uuid":"400539656","full_name":"sonofmagic/tailwindcss-miniprogram-preset","owner":"sonofmagic","description":"tailwindcss-miniprogram-preset, 用 tailwindcss 来改善你的小程序开发体验吧","archived":false,"fork":false,"pushed_at":"2023-12-15T14:27:12.000Z","size":410,"stargazers_count":54,"open_issues_count":2,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-27T05:51:10.204Z","etag":null,"topics":["miniprogram","preset","tailwindcss","uni-app","wechat-mini-program"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sonofmagic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-08-27T14:40:40.000Z","updated_at":"2024-11-29T03:06:20.000Z","dependencies_parsed_at":"2023-12-15T15:43:18.914Z","dependency_job_id":null,"html_url":"https://github.com/sonofmagic/tailwindcss-miniprogram-preset","commit_stats":{"total_commits":61,"total_committers":2,"mean_commits":30.5,"dds":0.2622950819672131,"last_synced_commit":"f4af2ace2ebf98dc3863190850a6fb89d4340d9c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Ftailwindcss-miniprogram-preset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Ftailwindcss-miniprogram-preset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Ftailwindcss-miniprogram-preset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonofmagic%2Ftailwindcss-miniprogram-preset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonofmagic","download_url":"https://codeload.github.com/sonofmagic/tailwindcss-miniprogram-preset/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243806050,"owners_count":20350775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["miniprogram","preset","tailwindcss","uni-app","wechat-mini-program"],"created_at":"2024-10-08T23:09:11.567Z","updated_at":"2025-09-26T15:25:41.606Z","avatar_url":"https://github.com/sonofmagic.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"👉👉👉 支持 `tailwindcss jit` 引擎的 [`weapp-tailwindcss-webpack-plugin`](https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin) 已经发布了，赶紧过来看看吧。\n\n它能带给开发者最原汁原味的 `jit` 模式开发体验，无需抛弃 `[`,`]`,`/`,`#`,`.` 等特殊符号，都在代码编译打包时统一处理。相比 `tailwindcss-miniprogram-preset` 方案来说开发体验更好，也兼容更多的工具类。\n\n# tailwindcss-miniprogram-preset\n\n\u003e tailwindcss-preset for miniprogram\n\u003e tailwindcss 小程序版本预设\n\n用 `tailwindcss` 来改善你的小程序开发体验吧\n\n## 功能\n\n大部分有用的 tailwindcss utilities 兼容小程序 + rem 转 rpx (默认 1rem = 32rpx)\n\n## migration(From v1 -\u003e v2)\n\n```js\n// # v1\n// tailwind.config.js\nmodule.exports = {\n  presets: [require('tailwindcss-miniprogram-preset')]\n  // ...\n}\n// # v2\n// tailwind.config.js\nconst {\n  defaultPreset,\n  createPreset\n} = require('tailwindcss-miniprogram-preset')\nmodule.exports = {\n  presets: [defaultPreset]\n  // ...\n}\n```\n\n## How to use it\n\nInstallation\n\n```sh\nnpm i -D tailwindcss-miniprogram-preset\n# or\nyarn add -D tailwindcss-miniprogram-preset\n```\n\nThen\n\n[Installing Tailwind CSS as a PostCSS plugin](https://tailwindcss.com/docs/installation)\n\nand `npx tailwindcss init`\n\nthen add `tailwindcss-miniprogram-preset` into your `presets`:\n\n```js\n// tailwind.config.js\nconst {\n  defaultPreset,\n  createPreset\n} = require('tailwindcss-miniprogram-preset')\nmodule.exports = {\n  presets: [defaultPreset]\n  // ...\n}\n```\n\n\u003e createPreset 这个方法，可以根据配置创建自定义的预设，以及是否启用 rem2rpx，可配合其他 `postcss` 插件使用，如[postcss-rem-to-responsive-pixel](https://www.npmjs.com/package/postcss-rem-to-responsive-pixel)\n\nThen import tailwindcss\n\n```css\n/* @tailwind base;\n@tailwind components; */\n@tailwind utilities;\n```\n\nor Using with Preprocessors\n\n```scss\n// uni-app App.vue 公共部分\n// 小程序不需要 'base' 'components'\n// @import 'tailwindcss/base';\n// @import 'tailwindcss/components';\n// 只需引入工具类\n@import 'tailwindcss/utilities';\n```\n\n## 最佳实践\n\n建议配合 vscode 插件 [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) 使用\n\n可以根据配置自动生成智能提示,可有效提升开发体验\n\n使用 `uni-app` 的朋友可以直接使用提供的模板\n\n- [vue2](https://github.com/sonofmagic/uni-app-vue2-tailwind-vscode-template)\n\n- [vue3](https://github.com/sonofmagic/uni-app-vue3-tailwind-vscode-template)\n\n## 默认配置\n\n\u003e 默认配置都可通过 tailwind 自带的 merge 策略开启, 其中\n\n- `darkMode` 默认 `false`\n- `theme.screens` 默认 `false` , 英文它不需要 pc 那种自适应边界\n- `important` 默认 `true` , 需要用它去覆盖原生的样式\n- `purge.enabled` 默认 `process.env.NODE_ENV === 'production'` ,可通过 `NODE_ENV` 环境变量,避免打包出来的 `wxss` 过大的问题, 开发环境默认关闭.\n- 一些 `class` 的 `rename` 见下表\n\n## 如何关闭 rem2rpx 转化?\n\n将 `createPreset` 的 `rem2rpx` 设置为 `false` 即可\n\n```js\n// tailwind.config.js\npresets: [\n  createPreset({\n    rem2rpx: false\n  })\n]\n```\n\n此时需要转化为 `rpx` ，可以使用 [`postcss-rem-to-responsive-pixel`](https://www.npmjs.com/package/postcss-rem-to-responsive-pixel)\n\n可以达到同样效果的 `postcss` 配置 `demo`:\n\n```js\n// postcss.config.js\nmodule.exports = {\n  plugins: [\n    require('autoprefixer'),\n    require('tailwindcss'),\n    require('postcss-rem-to-responsive-pixel')({\n      rootValue: 32,\n      propList: ['*'],\n      transformUnit: 'rpx'\n    })\n  ]\n}\n```\n\n## 定制化兼容小程序的牺牲\n\n### 小程序的 class 不支持除'-'和'\\_'外的特殊符号\n\n解决方案: 做 class rename 处理\n\n| form | to      | sample                 |\n| ---- | ------- | ---------------------- |\n| `\\/` | `-div-` | `w-1/4` -\u003e `w-1-div-4` |\n| `\\.` | `-dot-` | `w-1.5` -\u003e `w-1-dot-5` |\n\n### 小程序 wxss 只支持少量选择器\n\n[官方文档链接](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html)\n\n解决方案:\n\n- 去除基于 `:not` 选择器的 `corePlugins`\n- 去除不支持 `*` 选择器的 `corePlugins` , 例如默认添加 `'*, ::before, ::after'` 的插件\n- 清空 variants (`hover:` `focus:` 这些)\n- 不启用 `mode: 'jit'` 即时编译模式，因为 `wxml` 里写 `w-[762px]` ,`[` 和 `]`,会被默认转义为空格，导致即时编译无效。(小程序特殊符号只支持 '-' 和 '\\_')\n\n### 去除自适应和无用插件\n\n解决方案:\n\n- 只使用 `utilities` , 不导入 `base` 和 `components`\n\n## 如何覆盖此预设配置？\n\n核心插件:\n\n`corePlugins` 选项根据您是将其配置为对象还是数组而表现不同。\n\n如果您把 `corePlugins` 配置为一个对象，那么它就会被跨配置合并。\n\n如果您把 `corePlugins` 配置为一个数组，它就会取代您配置的预设所提供的任何 `corePlugins` 配置。\n\n[官方参考文档](https://www.tailwindcss.cn/docs/presets)\n\n## 注意事项\n\n如果开发时，HMR 热更新不起作用，可以更改 `purge` 选项\n\n也可以直接用自定义的 `purge` 选项, 覆盖当前 `preset`\n\n```js\n// tailwind.config.js\nconst { defaultPreset } = require('tailwindcss-miniprogram-preset')\n/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */\nmodule.exports = {\n  purge: defaultPreset.purge.content,\n  presets: [defaultPreset]\n}\n```\n\n## [corePlugins 启用状况](./CorePlugins.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonofmagic%2Ftailwindcss-miniprogram-preset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonofmagic%2Ftailwindcss-miniprogram-preset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonofmagic%2Ftailwindcss-miniprogram-preset/lists"}