有没有可能在开发时写 Tailwind CSS，在提交代码前转换成带嵌套关系的 Sass？

[CoolSpring]

背景：
我在自己的 hobby project 中习惯使用 Tailwind CSS 和 UnoCSS ，觉得开发效率很高，但在工作中需要遵循组内规范使用 Sass 。那么，有没有可能先用原子化 CSS 的写法进行开发，但在 git commit 前用工具转换成 Sass/Less ？

设想的工作流：
先把样式统统写在 class 里，然后用一个 CLI 工具转换，或者用一个 VSCode 插件“重构”。得到的结果是源文件中 JSX 或模版里的长串 class 名被替换成单个随机名称（后续按照其用途人工重命名），并生成一份对应的带嵌套层级的 sass/less 文件。

概括需求：
想一个英文宣传语就是：Write in "Atomic CSS" way, convert to nested CSS before you commit.
是否已有此类型的工具？如果没有，开发一个有意义和技术上的可能性吗？

相似但不太一样的方案：
1. 了解到 Windi CSS 有一个 Compilation Mode https://windicss.org/posts/modes.html#compilation-mode ，能把一串 class 转化为形如“windi-15wa4me”的单个 class 名，但它这个应该是在编译时生成的产物中出现，而我希望在开发时提交组件的源代码到 GitLab 前就做转换。
2. Tailwind CSS 有 shortcuts ，Sass 有 apply ，但这两者都需要在项目里额外配置 Tailwind CSS ，并且也没那么方便进行“一把梭”了，和这个想法的初衷不符。

相似但不太一样的方案补充：
3. 退一步，提取内联样式（元素的 style 属性）到 CSS 文件的工具应该早已有之。我资历尚浅，请教各位这种实践（新写一个页面时全写内联样式，调整到满意后，提取到单独的 CSS 文件中）常见吗？

[estk]

tailwind 写多了也复杂，还是项目开始前把整套 UI 规范定义好，用自己定义的样式，不过这个需要前期花很多时间，有时候老板等不及

[rioshikelong121]

修改组内规范。

[whitegerry]

找了好久 tailwind 的 Compilation Mode ，原来 windi 有这个方案。