import { CssToTailwindTranslator } from "css-to-tailwind-translator";

const cssCode = `body {
  width: 100%;
  height: 50%;
  margin: 0 !important;
  background-color: transparent;
}`;

const conversionResult = CssToTailwindTranslator(cssCode);

console.log(conversionResult);
// {
//   code: 'OK',
//   data: [
//     {
//       selectorName: 'body',
//       resultVal: 'w-full h-1/2 !m-0 bg-transparent'
//     }
//   ]
// }

CSS

tailwind

csscode

const

7 条回复 • 2023-04-30 16:40:30 +08:00

dode

2023-04-24 22:40:33 +08:00 via Android

🉑

kaddusabagei38

2023-04-25 09:26:22 +08:00

很不错的想法，但是我没搞懂为什么会写完整的 css 还要用 tailwind...

想要 tailwind 提高开发速度，为什么不直接用 tailwind 而是写一遍 css 再转换成 tailwind..

hymenhan

2023-04-25 09:40:44 +08:00

@kaddusabagei38 确实意义不大，哈哈哈，帮助新手过渡或者老代码迁移可能有微小帮助吧

violetlai

2023-04-25 09:59:32 +08:00

我偶尔也用这个，但是写死的数值还需要自己去换算就有点蛋疼了，基本只用自己不太了解的语法看看 tailwind 如何写

violetlai

2023-04-25 10:04:19 +08:00

@kaddusabagei38

更多的是规范和全局管理吧，和风格统一。

最好用的能说是响应式设计了，sm:xxx md:xxx ，如能加上分类就更好用了现在还是感觉稍有欠缺

lete

2023-04-25 12:17:30 +08:00

@kaddusabagei38 #2 有没有一种可能，我们可以把这个当成一个库使用？比如你写一个库发布到 npm 上让别人用，你的这个库可能需要 css 转 Tailwind 或 Tailwind 转 css 呢？

一个开源项目的出现，不仅仅只是解决开发工程中的问题，也有可能是其它库的依赖对象，归根结底就是你想不到应用场景，而别人想到了

dufu1991

2023-04-30 16:40:30 +08:00 via iPhone

这样写的意义是什么？

CSS To Tailwind - 实时将 CSS 代码转换为 Tailwindcss 语法

CSS To Tailwind

npm 方式使用