《网站设计与建设》电子书,做一个手机网站多少钱,装修案例,网站首页弹窗代码原生小程序开发如何使用 tailwindcss 原生小程序开发如何使用 tailwindcss 前言什么是 weapp-tailwindcss ?0. 准备环境以及小程序项目1. 安装与配置 tailwindcss 0. 使用包管理器安装 tailwindcss1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss2. 配置 tailwind… 原生小程序开发如何使用 tailwindcss 原生小程序开发如何使用 tailwindcss 前言什么是 weapp-tailwindcss ?0. 准备环境以及小程序项目1. 安装与配置 tailwindcss 0. 使用包管理器安装 tailwindcss1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss2. 配置 tailwind.config.js3. 引入 tailwindcss 2. 安装这个插件并运行 安装插件执行初始化命令开始运行 想要了解更多 前言 很荣幸从 weapp-tailwindcss 的 3.2.0 版本开始 已经可以支持 微信开发者工具直接创建的 小程序项目了 (包括 skyline 引擎) 什么是 weapp-tailwindcss ? 在我们日常的小程序开发中由于小程序本身有自己的一套 独特的 技术规范标准。这导致你无法使用 web 中很多的特性。 你也无法 直接 使用像 tailwindcss 这种原子化 css 生成工具来大幅加快你的开发速度。 而 weapp-tailwindcss 就能让你在小程序开发中使用 tailwindcss 里的大部分 特性加快开发小程序整体的效率。 从本质上来看它是一个转义器。它负责把 tailwindcss 中所采集到的类名以及生成的结果转化成小程序中可以接受的方式。 现在就让我们开始使用吧 0. 准备环境以及小程序项目 首先你需要准备 nodejs 环境nodejs 官方下载地址 请确保你安装的 nodejs 版本 16.6.0。目前低于 16 的长期维护版本(偶数版本) 都已经结束了生命周期建议安装 nodejs 的 LTS(目前是 20) 版本 然后你可以使用 微信开发者工具 创建一个小程序项目, 原生 js/ts 或者 skyline 的 js/ts 项目皆可。 这样我们的前置准备工作就完成了 1. 安装与配置 tailwindcss 这里我们以最基础的 小程序 js 项目为例进行操作 0. 使用包管理器安装 tailwindcss 首先假如你项目目录下没有 package.json 文件, 你需要执行命令或者手动创建一下: 运行 npm init -y 命令快速创建一个 package.json 文件在你的项目下 然后执行: # 使用你喜欢的任意 npm / yarn / pnpm npm install -D tailwindcss postcss # 初始化 tailwind.config.js 文件 npx tailwindcss init这样 tailwindcss 就被安装到你项目本地了 1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss 内容如下: module.exports {plugins: {tailwindcss: {},}, };这个文件和 tailwind.config.js 平级 2. 配置 tailwind.config.js tailwind.config.js 是 tailwindcss 的配置文件我们可以在里面配置 tailwindcss 的各种行为。 这里给出了一份 微信小程序 通用示例具体要根据你自己项目的目录结构进行配置 /** type {import(tailwindcss).Config} */ module.exports {// 假如你使用 ts 开发则需要在下方的 glob 表达式中把 ts 后缀配置进去content: [**/*.{js,wxml}, !node_modules/**, !dist/**],corePlugins: {// 小程序不需要 preflight因为这主要是给 h5 的如果你要同时开发小程序和 h5 端你应该使用环境变量来控制它preflight: false,}, };3. 引入 tailwindcss 在你的小程序项目入口 app.wxss 文件中引入 tailwindcss 使它在小程序全局生效 tailwind base; tailwind components; tailwind utilities;接下来赶紧进入下一步安装 weapp-tailwindcss 并运行吧 2. 安装这个插件并运行 安装插件 在项目目录下执行: # npm / yarn /pnpm npm i -D weapp-tailwindcss weapp-tailwindcss/cli这样 weapp-tailwindcss 和 cli 工具就被安装在你的本地了 执行初始化命令 在命令行中运行 npx weapp-tw init对现有的原生小程序项目进行 weapp-tailwindcss 的初始化 执行后会发现主要有三个文件改动CLI 主要做了 3 件事情: 创建 weapp-tw.config.js 文件这个是 weapp-tailwindcss/cli 的配置文件修改 package.json, 添加 dev 和 build 开发和构建脚本, 和 postinstall 脚本修改 project.config.json 内容来适配构建产物 开始运行 使用 npm run dev 进入开发模式, 此时是有热更新的主要用于开发 使用 npm run build 进行构建 构建产物默认都在 dist 目录 然后打开微信开发者工具直接导入这个目录即可预览效果! 想要了解更多 当然这个解决方案其实不止限于微信开发者工具这个平台也可以通过配置适配更多的平台。 假如你想了解更多欢迎访问 weapp-tw.icebreaker.top 或在 weapp-tailwindcss/discussions 中与我们进行讨论发表你的建议和意见。 PR is also Welcome!