uniapp uses taiwindcss multi-platform development and maintains native writing plug-ins

weapp-tailwindcss-webpack-plugin

https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin
weapp-tailwindcss-webpack-plugin Another plugin tailwindcss-miniprogram-preset I have used in the project and made it compatible with h5 WeChat Mini Program APP, but the tailwindcss-miniprogram-preset plug-in needs to configure the preset by itself and does not use the jit engine to load and use, which is relatively slow and cumbersome to configure. And weapp-tailwindcss-webpack-plugin maintains the original writing method and can use the jit engine to re-hot update naturally and quickly.
The github documentation of weapp-tailwindcss-webpack-plugin is also very complete and the related demo is also relatively friendly.
You only need to customize and configure the conversion ratio between rem and rpx and support v3 Arbitrary values ​​to write classes with arbitrary values, such as text-[22px] means the font size is 22px, and then customize the spacing and other styles to complete the custom adaptation
insert image description here

insert image description here

insert image description here

mini-program-tailwind

https://github.com/dcasia/mini-program-tailwind
The mini-program-tailwind plug-in is similar to weapp-tailwindcss-webpack-plugin, and the native writing plug-in is automatically converted to the css syntax of the mini program. The conversion of rpx is also written through rem and supports any value of Arbitrary values ​​of v3. For example, text-[22rpx] means the font size is 22rpx. And it also supports windcss. It is a plug-in that supports Tailwind/Windi CSS at the same time.
insert image description here

insert image description here

vite-plugin-uni-twucss

uniapp plug-in market vite-plugin-uni-twucss
https://github.com/maitel2020/vite-plugin-uni-twucss
The vite-plugin-uni-twucss plugin supports compiling tailwindcss, windicss, unocss compiled css into support The small program and app-nvue in uniapp are packaged using vite, which is cumbersome to install. It is necessary to upgrade the node version of HBuilderX and currently does not support vue2, only supports vue3, and the description in the document is relatively brief, but the advantage is that the plug-in volume is currently only 4.3kb
insert image description here

insert image description here

I changed the demo a little bit myself

https://gitee.com/hhh917/uniapp-tailwindcss-demo

Guess you like

Origin blog.csdn.net/weixin_43245095/article/details/126539110