// 转化的单位,可以变成 px / rpx unit: 'rpx' }) ], } 8、使用注意 在使用过程中,我发现text-[32rpx],涉及到rpx单位时,它会识别成颜色,因为颜色也是text开头,所以最好这样text-[length:48rpx] tailwind官网 官网:https://tailwind.nodejs.cn/docs/installation...
使用-dot-代替了 使用 包含/与.的tailwindcss class会被 postcss.config.js 文件设置的重命名 拆分而失效 使用代替字符则生效 第三方预设 rem被rpx替换 rootValue 标识 1rem 对应 32rpx 如果不使用第三方预设 可以在 tailwind.config.js 文件 直接配置 theme属性 使用默认环境配置把需要的部分 更改即可,下方为修改...
在小程序中使用tailwindcss简直就是一个折磨,因为小程序环境不支持大量语法,比如w-[1.5rpx]等。 提供vite-plugin-uni-app-tailwind,通过修改bundle的方式支持了tailwindcss大部分原本不支持的语法,现在你可以正常使用tailwindcss了。 不想要丑丑的[]?不如来看看tailwind-extensions和UnoCSS吧。 没有做webpack支持,一方...
不仅是宽度、宽度、边距、填充都是这样需要加上rpx在H5会编译成rem在小程序会编译成rpx 在Tailwind CSS 里面颜色透明度也不用那么麻烦 和H5里面一样的使用 比如text-red-500/25 0.25透明度 后面的值也不是随便填的具体看这里 --如果有哪里写的不对的地方,还请指出 ...
// 转化的单位,可以变成 px / rpx unit: 'rpx' }) ], 开始使用 配置这些完成后可以在小程序模拟器上进行看到效果了,这里简单演示一下,字体变红。 这里大概就结尾了,uniapp + tailwindcss 的简单教程,个人讲解还是有缺陷,如果大家感兴趣可以去官方详细看看,下面是上面提到的关键词的官方文档: ...
chore: rpx替换应该只在微信小程序里进行#6 Feb 21, 2023 tailwind.config.js chore: commit codes Dec 14, 2023 uni.scss feat: init project Jul 29, 2022 vue.config.js chore: das Dec 15, 2023 yarn.lock chore: das Dec 15, 2023 README ...
transformUnit: "rpx", }) ); postcssPlugins.push(postcssWeappTailwindcssRename()); } // https://vitejs.dev/config/ export default defineConfig({ plugins: vitePlugins, plugins: vitePlugins, resolve: { alias: { "@": resolve(__dirname, "/src"), @@ -34,22 +46,7 @@ export de...
@unocss-applet/preset-rem-rpx Coverts rem <=> rpx for utils. zguolee •0.8.5•2 months ago•1dependents•MITpublished version0.8.5,2 months ago1dependentslicensed under $MIT 3,481 @uni-helper/uni-env 在uni-app 中优雅地判断当前环境。
技术栈:vue3+js+Tailwind css + Monorepo包管理工具 一. uni-popup-dialog IOS下出现自动弹出软键盘的现象 网上很多解决方法都是 改uni-popup-dialog源码之类的,感觉都是治标不治本, 我的解决方法是不用自带的输入框!!!要用自定义的!!! 错误示例 看👇 ...
<viewclass="good-title ellipsis-2"><textstyle="font-size: 28rpx;color: #2D2D2D;font-weight: 500;"><textclass="good-text">99新</text><viewclass="good-text !zhs-bg-[#4D955D] !zhs-text-white">可换新</view><textclass="good-name-long">抖音 iphone11 99新 64G</text></text><...