有没有一种插件,写模板的时候，自动生成对应的类名

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 532 天前的主题，其中的信息可能已经有所发展或是发生改变。

<div class="c-ff0000 mt-90 ml-80"> </div>

c-ff0000 自动生成一个类 c-ff0000,颜色为 ff0000

mt-90 自动生成 mt-90 ，margin-top:90px

...

8 条回复 • 2023-06-08 14:12:02 +08:00

eddiechow

2023-06-08 10:44:32 +08:00

一种思路，你把这个逻辑告诉 chatgpt ，训练它，直到它能根据你的 html 文本准确输出 css 代码；以后你就只管往对话里面丢 html 文本就行了；
二种思路，自己造个轮子，自己实现

NathanDo

2023-06-08 10:48:01 +08:00

你这个效果不就是 tailwind css 的功能吗

molvqingtai

2023-06-08 10:48:15 +08:00

为什么不是提前定义好颗粒度很细的类名，推荐使用 tailwind

liuidetmks

2023-06-08 10:49:31 +08:00

@molvqingtai 会不会导致没用到的类名也加载进来了

511shajo

2023-06-08 10:51:55 +08:00

GitHub Copilot ？

molvqingtai

2023-06-08 10:52:36 +08:00

@liuidetmks 既然是 CSS 框架，这种基础的功能当然是有的

molvqingtai

2023-06-08 11:01:21 +08:00

@liuidetmks 完全符合先写类名再生成 css 的也不是没有，这个类 tailwind 的 virtual css 完全符合你的需求 https://css.master.co/

lisongeee

2023-06-08 14:12:02 +08:00

你说的这种是 unocss 的基础功能之一 <https://unocss.dev/guide/>

unocss 更多情况下定义的是规则，而不是固定的颗粒度类

比如可以定义 m-N -> margin: Npx ，N 是任意的数字

还有我觉得最好用的预设 Attributify preset

<div class="m-2 rounded text-teal-400 flex fixed" /> 可以直接写成

<div m-2 rounded text-teal-400 flex fixed />