Warning: it is important that you put the semicolon at the end of the function!

Color tokens

• entity.factory.style: #91c26e
• entity.factory.symbol: #abb3c0
• entity.factory.style.internal.class: #d7c075
• entity.factory.style.html.tag: #da6f77
• entity.factory.style.pseudo: #ba7de6 / italic
• entity.factory.style.rule: #c16bff / italic / bold
• entity.factory.style.internal.id: #7d8be6
• entity.factory.style.number: #efba89
• entity.factory.style.unit: #eda460 / italic

You can change the colors in your VSCode configuration:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "entity.factory.style",
        "name": "Factory Style",
        "settings": {
          "foreground": "#91c26e"
        }
      }
    ]
  }
}

Snippets

tfi: Import Tailwind Factory and create a new factory component

import { tf } from "tailwind-factory";

export const Container = tf("div", `
  
`, {
  variants: {},
  defaultVariants: {}
});

tfc: Create a new factory component

export const NewComponent = tf("div", `
  
`, {
  variants: {},
  defaultVariants: {}
});

tfe: Create a new extended factory component

export const NewComponent = Parent.extends(ParentComponent, `
  
`, {
  variants: {},
  defaultVariants: {}
});