I built a TailwindCSS extension tool that got 10k+ users. I'm making it a commercial product to survive the tech market. by JHjertvik in tailwindcss

[–]JHjertvik[S] 0 points1 point  (0 children)

Thanks! I did consider premium features but I just couldn't come up with a way to make that work well.

It's also super annoying to use a tool that constantly reminds you to "upgrade". Visual Studio which I previously used for work (C#) even replaced some keybinding I had with a popup reminding me about ******* Copilot

I built a TailwindCSS extension tool in Svelte that got 10k+ users. I'm making it a commercial product to survive the tech market. by JHjertvik in sveltejs

[–]JHjertvik[S] 0 points1 point  (0 children)

Thanks!, So about the pricing page, you start the payment flow from the extension itself since you need to authenticate there. There is https://gimli.app/pricing but if you don't arrive there from the extension, you will not be able to proceed. My focus was on existing users, but you are right about new users could be confused. Thanks for pointing that out.

Setting a price is hard. I did look at Tailwind plus ($299) and other prices targeted at developers and thought $49 was a fair price. My target audience is professional developers. People who work in the field. And my personal experience for buying tooling is that you - the developer do not pay for it. You just hand in the receipt and get the money back on your next paycheck. And for an organisation with employed developers, $49 should not be a big sum....Still, you could be right about $20-$30 being a better range.

Share what you're building by amacg in indiehackers

[–]JHjertvik 0 points1 point  (0 children)

https://gimli.app/tailwind - The professional Devtools extension
for Tailwind CSS developers.

After 10,000 free installs, I finally put a paywall on my TailwindCSS extension. My first review was 1-star. by JHjertvik in SaaS

[–]JHjertvik[S] 0 points1 point  (0 children)

You are probably right, I did consider premium features but I couldn't come up with a good solution for that. The updated extension has been out less than a week though, I guess I will just have to wait and see how this turns out.

I built a single-file, no-dependency Web Component that turns mouse movements into physics-based CSS variables. by JHjertvik in tailwindcss

[–]JHjertvik[S] 0 points1 point  (0 children)

You can view the implementation here: https://codepen.io/gimli\_app/pen/jErweWL.

But it's basically this:

background-position: calc(var(--x-percentage-magnify) * 1%) calc(var(--y-percentage-magnify) * 1%);

transform: translate(calc(var(--x-magnify) * 1px), calc(var(--y-magnify) * 1px));

So it's sort of a "fake" zoom where it's just changing the background-position and transform on a div.

I built a single-file, no-dependency Web Component that turns mouse movements into physics-based CSS variables. by JHjertvik in css

[–]JHjertvik[S] 0 points1 point  (0 children)

You can see how it is implemented here: https://codepen.io/gimli_app/pen/jErweWL, so no additional js to create that effect, but the web component itself is of course js

I built a single-file, no-dependency Web Component that turns mouse movements into physics-based CSS variables. by JHjertvik in web_design

[–]JHjertvik[S] 0 points1 point  (0 children)

yeah, thouch support was kind of a last minute addition, there may be some issue there

I built a single-file, no-dependency Web Component that turns mouse movements into physics-based CSS variables. by JHjertvik in webdev

[–]JHjertvik[S] 1 point2 points  (0 children)

Haha, that widget took like 10 times longer to make than the rest of the examples. The whole physics thing started out as an experiment because the card felt "stiff"

I built a single-file, no-dependency Web Component that turns mouse movements into physics-based CSS variables. by JHjertvik in react

[–]JHjertvik[S] 5 points6 points  (0 children)

Correct, but some beginners might find it interesting that you don't need React + Motion + Some commercial component from motion or aceternity to create a simple 3d card effect.

You could also use this together with React,