`background` is not supported

[kachkaev]

Current Behavior

In css-to-tailwindcss@1.0.4, background: red converts to "", while background-color: red converts to "bg-[red]".

Expected Behavior

It’d be great if CSS like background: red could be mapped to a tailwind class too. I understand that the value of background shorthand can also contain image URL and its placement. It ca be hard to parse, but even supporting simple cases would be great. In practice, a lot of CSS I have seen is using background: color shorthand.

Environment

• Version: css-to-tailwindcss@1.0.4
• Platform: macOS
• Node.js Version: 18.16

---

PS: Great lib @Jackardios! Thanks for working on it 🙌

[arvigeus]

I wrote a simple PostCSS plugin as a workaround:

const fixTailwindCSSProperties: postcss.Plugin = {
  postcssPlugin: 'fix-tailwindcss-properties',
  Once(root) {
    root.walkDecls('background', (decl) => {
      // Check if the declaration is a single color value
      const isColorValue = /^#[0-9A-F]{3,6}$/i.test(decl.value) || /^[a-z]+$/i.test(decl.value);

      if (isColorValue) decl.prop = 'background-color';
    });
  }
};