<template><div w="full" py="4" px="4"></div></template>
上述标签，通过浏览器查看，会生成以下的css样式，请问是通过什么原理生产的？
环境是vue3 + vite + element-plus, 还用到了scss，上述代码是vue文件里的模板代码
[py~="4"] {
padding-top: 1rem;
padding-bottom: 1rem;
}
[px~="4"] {
padding-left: 1rem;
padding-right: 1rem;
}
.w-full, [w~="full"] {
width: 100%;
}
+
可能是使用了 UnoCSS 或者 Tailwind CSS 之类的工具，需要查看 package.json 中安装使用了哪个。具体是什么原理，请转对应的工具中查看。