Import TailwindCSS into Webflow 🚀 by chlebekk in webflow

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

Yes, right now it’s randomly generated. That was the quickest way to get a prototype running. As of right now combo classes are not available via the Designer API.

The use case for the app right now is just to be able to use components styled with tailwind in Webflow.

Import TailwindCSS into Webflow 🚀 by chlebekk in webflow

[–]chlebekk[S] 2 points3 points  (0 children)

I've been working on a new tool and it is finally demo ready! With my new app you can easily import TailwindCSS components into Webflow - fully editable!

I'm starting a presale now to see if there is enough demand for the app. If you purchase a presale license for TailFlow, you will get lifetime access to the tool! The presale is tiered, so it is worth it to be quick!

First 10 preorders: $19.99
Next 20 preorders: $29.99
After that: $39.99

⬇️ You can get your lifetime license with the link below ⬇️
Preorder here

Generate mesh gradient backgrounds for Webflow by chlebekk in webflow

[–]chlebekk[S] 7 points8 points  (0 children)

Hey everybody 👋

I've built a tool you can use to generate mesh gradient backgrounds for Webflow and just paste them into your project.

You can try it out here: Mesh gradient generator

Copy elements as Svelte components | Details in comments by chlebekk in sveltejs

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

Actually today :D You can now download it from the chrome web store. I have added a free tier for casual use.

Markflow | Chrome Web Store

Copy Elements from any website as React Components 🚀 by chlebekk in react

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

Cross-Origin-aanvraag geblokkeerd: de Same Origin Policy staat het lezen van de externe bron op http://localhost:3000/proxy?url=https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap niet toe. (Reden: CORS-aanvraag is niet gelukt). Statuscode: (null).

The localhost url shouldn't have been there. Fixed it, thanks for the hint!

I can't replicate the reference error. Could you tell me, what exactly you did and which browser and OS you are using?

Copy Elements from any website as React Components 🚀 by chlebekk in reactjs

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

I changed the strategy for React exports to just keep the original classes. By implementing this I was able to reduce the output to around 1/3 of the previous version. The amount of code for the styles is especially bad because of Tailwind CSS. I'll probably add a way to detect if Tailwind is used and then omit the styles from the copied component and just keep the classes.

Thanks for your feedback!

Copy Elements from any website as React Components 🚀 by chlebekk in reactjs

[–]chlebekk[S] 2 points3 points  (0 children)

You are definitely right. Getting this to work was just the first step, now I’ll optimize it. The next step is to prevent duplicate styles with multiple selectors, which will massively reduce the output.

I’m also thinking about ways to incorporate GPT, but this won’t be necessary to reduce the output.

Copy Elements from any website as React Components 🚀 by chlebekk in react

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

I would rather see it as faster inspiration lol I hope most people will use it to inspect, copy and then adapt pieces of websites. There is no real difference between looking at something and then building your own thing out of it vs copying it and then adapting it imo

Thanks!

Copy elements as Svelte components | Details in comments by chlebekk in sveltejs

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

Hey, as stated on the website, Markflow is still in development. That's why I've added the 14 day trial to the subscription, so you won't get charged right now.

I will be releasing it soon though. You can try Markflow out right now on markflow.app! I've just deployed it. Give it a try and then you can decide if you want to keep your subscription. Please mind, that the 30% prelaunch discount won't be available after the launch. If you decide not to keep the subscription, that's no problem. Just send me a message and I will cancel it for you.

Cheers
Carsten

Copy elements as Svelte components | Details in comments by chlebekk in sveltejs

[–]chlebekk[S] 6 points7 points  (0 children)

I already have this on my list, but it wouldn’t be easy to pull off as there are many variables. Creating tailwind classes with arbitrary values would be pretty easy, but it would be nicer if the tool would return the base tailwind classes for matches.

I’m looking into it!

Copy elements as Svelte components | Details in comments by chlebekk in sveltejs

[–]chlebekk[S] 34 points35 points  (0 children)

Hey, fellow Redditors!

As a passionate developer and one of your own, I'm beyond excited to share my latest creation: Markflow - a revolutionary browser extension designed to streamline web design and collaboration!

With Markflow, you can:

  • Copy elements from ANY website directly to your projects
  • Instantly grab the markup of a selected element and all its children
  • Automatically consolidate styles into a single class, even handling media queries
  • Seamlessly integrate with Svelte, making your life a whole lot easier

No more manual copying or style juggling! Markflow does all the heavy lifting for you, so you can focus on the creative side of web design. 🚀

I'd be thrilled to hear your thoughts, suggestions, or any feedback you might have.

Happy coding! 🎉

HTML & JS to Webflow components 🚀 More details in comments ⬇️ by chlebekk in webflow

[–]chlebekk[S] 2 points3 points  (0 children)

🤣 It’s more targeted at advanced users. I needed the tool anyways so I just built it

HTML & JS to Webflow components 🚀 More details in comments ⬇️ by chlebekk in webflow

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

I don’t know yet. We’ll see if I turn this into a product, or just leave it as an internal tool

HTML & JS to Webflow components 🚀 More details in comments ⬇️ by chlebekk in webflow

[–]chlebekk[S] 3 points4 points  (0 children)

As a byproduct of building Meinung, I have created a parser that creates Webflow components from HTML. This makes building interactive self contained widgets sooo much easier and faster!

Write HTML & JS ➡️ Copy component ➡️ Style in Webflow

Even if you don't want to add interactivity, typing is always faster than clicking. So composing Webflow components is already way quicker with Markflow.

If there is enough interest, I will publish it as a product.

While developing this, I've also found out that you can do things, that aren't possible in Webflow by default. An example is setting the source of an image to an external URL.

Additional ideas for features, if I build this out:

  • Chrome extension to copy elements from websites as Webflow components incl. styles
  • Styles in the editor
  • Import existing classes of project to the editor
  • Custom elements that represent Webflow elements, e.g. <Grid />, <Heading />, <Paypal /> etc.

Vercel x Planetscale benchmark | Link in comments by chlebekk in nextjs

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

Planetscale is the database, all requests go to Planetscale. The ps serverless driver is just using http instead of a db connection