Taliwind CSS 和 Vant使用情况下的适配问题

[Eastboat]

<img class="block w-[120px] mx-auto mb-[20px] pt-[30px]" alt="Vue logo" src="~@/assets/logo_melomini.png" /> 你好，我发现在 适配vant成功的情况下，我想使用Taliwind官方的 text-base 、 text-lg等等这样的原子化class是会有冲突的，字体会很大，想问问有没有好的解决办法？

[yulimchen]

Tailwindcss 默认预设的 text-base text-lg 等类名用的是 rem 单位，本项目的 px2viewport 插件不能进行转换，需要在 tailwind.config.js 中重置默认预设值为 px 单位

[Eastboat]

Tailwindcss 默认预设的 text-base text-lg 等类名用的是 rem 单位，本项目的 px2viewport 插件不能进行转换，需要在 tailwind.config.js 中重置默认预设值为 px 单位

可以详细展开说说么？ https://www.tailwindcss.cn/docs/configuration ，感觉需要配置很多，如何和你的px2viewprot一起工作？ 比如最终我只需要结合设备dpr转成rem单位即可

[yulimchen]

可以考虑使用 postcss-pxtorem 替换掉 cnjm-postcss-px-to-viewport 插件，最终输出是 rem 单位

[Eastboat]

可以考虑使用 postcss-pxtorem 替换掉 cnjm-postcss-px-to-viewport 插件，最终输出是 rem 单位

如图：这里taliwindcss 官方就是使用的rem单位，text-base默认是 1rem = 16px, 我们可以理解为：它默认 以浏览器的 font-size根字体是16px。

但是我们是移动端项目，我们在搭配移动端组件库，比如使用vant时, 官方推荐我们使用相关库将px转rem或者vw等达到dpr适配效果:

注意这里的转换比例，假设 font-size：37.5px => 1rem， 这个时候 tailiwindcss 怎么做到适配性？比如我写了text-base

---

主要是因为lib-flexible 用于设置 rem 基准值，会根据设备dpr设置根字体大小。这里根字体会在不同手机上变化， 而实际taliwind css的单位也是需要根据根字体去计算的，而不是一直是1rem去表示，如下图：

在根字体大小为24px的情况下，要表示16px的字体大小，那么text-base应该是 16px / 24px = 0.6667rem

总结： 我们如何实现taliwind css 内部一些原子化class的适配性？目前我项目里都是text-[20px]，这一类写法能根据根字体正常转换匹配的rem，当使用text-base，就失去了这种效果

[Eastboat]

[yulimchen]

text-base text-lg 这些值都是预设的固定值，感觉只能通过配置里覆盖值来实现了

[Eastboat]

text-base text-lg 这些值都是预设的固定值，感觉只能通过配置里覆盖值来实现了

hello,你指的配置是定制化基础原子类么.. 📌

[yulimchen]

是的，如果有更好的处理方法烦请告诉我