Optional TypewindProvider, strict mode, aliases & more

[vishnudt2004]

Hello! 👋

I’ve been using typewind recently and really enjoying its API, the DX is so clean and modern.

While experimenting, I came up with a few ideas for potential features/enhancements that could push typewind even further. I realize not all of them may align with the core philosophy, but I wanted to share them in case any seem useful or worth exploring:

---

💡 Feature Ideas:

• tw Prop Support
  Allow using a tw prop on any JSX element as an alternative to className. This could help clearly distinguish Tailwind styles from custom class names, leading to cleaner codebases.

• Alias Support (Component-Level or Config-Based)
  Similar to how Tailwind supports @apply, typewind could support a lightweight alias system:

  aliases: {
    primary_btn: tw.bg.blue[400].text.white.px[4].py[3]
  }

  Either through a config file or within a Provider (explained below).

• Strict Mode
  A mode where typewind logs warnings (or errors) if raw string classNames are used instead of the tw prop. This could be helpful during migrations or when enforcing code consistency.

• <TypewindProvider> Component
  A React Provider that enables app-wide configuration of typewind behavior. For example:

  <TypewindProvider
    logUsage
    aliases="enable"
    mode="strict" // or "custom"
  >
    <App />
  </TypewindProvider>

  Features like aliasing, logging, strict mode, etc., could all be controlled via props.

• Dedicated typewind.config.js File
  Instead of using package.json for config, allow a separate config file for better structure and flexibility — similar to tailwind.config.js.

• .tw File Support (Optional Future)
  Explore the idea of using .tw files to define reusable sets of Tailwind styles — especially helpful in large apps where styles get complex and repetitive.

---

I totally understand if some of these ideas go beyond the intended scope of typewind. But I believe even a few of these could enhance its flexibility and developer experience.

I also feel like some of these might be overkill or not really necessary. I’m just sharing all the ideas that came to mind suddenly while experimenting.

I’d also love to contribute to some of these ideas — maybe not full implementations, but I’m happy to initiate or collaborate on them wherever possible.

Thanks for building such a great tool! 🤝

---

Edit: After some deeper research, I've realized that what I proposed isn't actually feasible, custom props like tw can't be used directly on native JSX elements like <h1> or <p>, as React strips unknown props from DOM output for safety reasons. So yeah, I acknowledge this was a mistaken suggestion on my part.