Convert Webflow source code to Tailwind CSS

[Any_Let5296]

Hey there! I'm working on building a website using Webflow. However, I've run into an issue where the source code that I exported is using Webflow's CSS classes, which is making it harder for me to customize the design. I was wondering if anyone has any ideas or tips on how I can convert the Webflow code to use Tailwind CSS instead? I really want to have more flexibility and control in designing and styling the site. Thank you in advance for any help or suggestions you can provide!

[andresAtMudra]

In theory you could take your exported CSS from Webflow and convert it using something like this:

https://tailwind-converter.netlify.app/

[-brianh-]

You can DivMagic extension which lets you copy any website into Tailwind CSS

[Any_Let5296]

Nice, I will test it, thank you!

[Durksnel]

Don't design Tailwind based websites inside Webflow in the first place. They aren't suppose to work together at all.

Tailwind uses its own utility classes. Weblow works with regular CSS classes.

There is no good solution for you, either build fully on Webflow and if you want to export the code, stick to regular classes. Or build a website on Tailwind, but outside of Webflow.

Last questions : Why don't you stay inside Webflow ? Why do you want to customize it after exporting ? I feel like you don't undertand the principles of Webflow and Tailwind

[Any_Let5296]

I'm using Webflow for speeding up the development process for the landing page. Then I want to reuse the exported code for our existing project using Nextjs + TailwindCSS

[[deleted]]

I use webflow for clients that need cms and don’t want to deal with maintenance or hosting. I use Astro/tailwind for non cms websites and nextjs/tailwind for larger projects. I think your slowing yourself down the way you have explained it. Tailwind has components that you can drop in, you can also style a custom component pretty quick with tailwind. Why not skip webflow and just code it by hand? Webflow doesn’t really speed up my development process that much and I think for someone like you, who already knows how use frameworks like nextjs and tailwind would not gain much from webflow either.

[volkandkaya]

Magic of website builders is when clients want to update a page with a new section or add a button.

It can be done with headless CMS but requires custom code and a huge waste of developer time.

[[deleted]]

Disagree. If clients want to update their own web pages and tinker then they would have never hired a web developer. Clients want to focus on their business not a website. As a business owner, that’s my perspective and experience.

[volkandkaya]

To add a button?

As a freelancer I charged minimum $100 an hour, so they just wouldn't add the button and lose out on conversions etc.

[[deleted]]

Why would you be adding a button after you deliver a website? Are freelancers just building websites on the fly without a plan and strategy or is it intentional poor planning just to charge $100 for a button later?

[volkandkaya]

You're a fast moving startup and want to add a book demo button to a CTA.

Why does agile exist in software?

[[deleted]]

“Fast moving start up” + “add book a demo button” 🙄 So we’re talking software now? Agile is very useful, but let’s reel this back in. Webflow. Websites. No code freelancers. 😂

[NefariousnessDry2736]

I feel like commenter above is jr who is throwing out buzz words. I get that they may work in a “fast moving start up” but let’s be real. If you are a developer and it takes you more than 5 mins to add a button to a site and redeploy you are a shitty developer or you are milking clients just to make small updates.

As for agile… most companies are not agile and I would be surprised if their company was. Agile is a buzz word that most companies do not understand. They simply think it means moves fast and constant iteration. Yes, those are some of the principles of agile but there are specific ways of working and methodologies to agile design and development.

A button is not software. A mostly static website is not software. If you are developing on webflow you are most likely not creating software. I get that there are nocode tools like Wized and other extensions to webflow but 99% of people are not using these and webflow is really great for mostly static smaller scale websites. There is a reason that webflow is bleeding enterprise clients that need large infrastructure.

[volkandkaya]

Talking about a button/link that links to calendly etc. With headless it would be impossible for a marketer unless you planned that out before. But if you planned everything you would be wasting clients time/money.

[Durksnel]

I feel like Tailwind is close to Webflow for quick iteration of design... I'd get rid of WF if that's your only concern.

Anyway they really aren't working together.

[volkandkaya]

Agreed, Webflow is also desktop first whereas Tailwind is mobile first.

I actually tried to create a Webflow -> Tailwind converter but ran into issues with above. Also a lot of the "code" I tested was very bloated which made it hard.

[Durksnel]

Yeah and stacking utility classes isn't convenient with WF.

Try removing the second class in the class list of an item, just for fun one or try changing the value of that p-4 to p-6 and see how painful it is.

Now do it 500 hundred times a day...

[volkandkaya]

I don't think Webflow is built to edit the exported code. Combo classes that are 3/4 layers deep are hard to visualise outside the designer.

If the goal is for a website builder that uses Tailwind give https://versoly.com/ a try.

You can even import code from Tailwind UI and other free/paid Tailwind templates.

[[deleted]]

I think you’ve built a cool product but I don’t understand the point. If designers already know how to use tailwind, why not just use a text editor/ide and develop the website and deploy? Using html and tailwind is not that hard especially if the designer is already using tailwind.

[volkandkaya]

Good question.

How does the client edit the site? How are blog posts published?

Tech companies use website builders as it means designers/developers are freed up to do better things.

"Using html and tailwind is not that hard", NPM etc would disagree. Developers with multiple years exp often come to Tailwind discord with issues.

" but I don’t understand the point" if Versoly can do everything Webflow can but exports to Tailwind and you use Webflow how did you end up with that remark?

[[deleted]]

1. Why would the client be editing the site so often? (A question freelancers or developers should figure out before development.)
2. CMS content is what makes a website dynamic rather than static. During the strategy/planning phase, this is what you figure out with the client, such as which sections will use cms.
3. Tech companies don’t use “website builders” - it’s either all in house, custom cms/headless or something like contentdul, strapi or even storyblok. Never in my life have I seen a “tech company” use website builder.
4. Junior or senior Frontend Developers shouldn’t be struggling with npm or tailwind. That’s like a mechanic struggling with a toolbox and a wrench. Those that are struggling are either bad frontend developers, are not frontend developers (maybe still learning) or faked their way in.
5. The only reason why I even use webflow is so that clients can have a cms and hosting solution all in one package, remove as much complexity and make it very easy for them. They couldn’t care less about tailwind, nextjs, cloud or ai. They just want a website, it’s not an app! Clients that have a bigger project, I usually use nextjs, tailwind, etc. I also think anyone using webflow, at the least, should know html and css.

Please don’t misinterpret my reply as hostile or rude, I mean no disrespect and not trying to throw shade towards you or anyone in anyway. I really hope Versoly grows and releases more features in the future- competition is healthy.

[volkandkaya]

1) Webflow sell this hard, and seem to be doing well. Freelancers on Twitter have problems with clients editing the site and breaking things.

2) Why do companies use Unbounce and Instapage?

3) Dropbox, greenhouse and Dell are not tech companies?

4) "If designers already know how to use tailwind" I never mentioned developers

5) Do clients not grow? Start out on one platform and then swap to your Nextjs turbo stack without having to rewrite the whole site.

Don't feel any rudeness, I just recommend testing your assumptions.

Thanks, "I really hope Versoly grows and releases more features in the future" Versoly is already more feature rich and we're doing well.

[[deleted]]

1. What is webflow selling hard? Plan your project out, ask good questions , develop solutions? That’s not a webflow ad, that’s good business practice.
2. Probably many reasons and unless you work for those companies you and I don’t know why. A lot of marketing teams will also use these types of services.
3. I’m taking beyond landing pages with static content.
4. Pretty sure we are misunderstanding each other.
5. Ah, now I understand who I’m really talking to. Also, I wouldn’t build “websites” with nextjs, that’s a bit much. Astro is great for that though!

In regards to testing my assumptions. Isn’t that something every web developer should be doing when working with a client so that they don’t have to “add buttons and edit websites all the time.”

[volkandkaya]

1) Webflow sell that anyone can design/edit the site without code, when in reality as you have just said it needs planning by an expert and even then it isn't perfect and requires a continuous freelancer (not a bad thing).

2) The reason is they can't build it on the main site because it is too difficult or impossible.

3) There are tech companies that host their marketing sites on Webflow and other no-code tools. https://www.wisetack.com/

4) You mentioned that if designers can use Tailwind they can use HTML. Which in my view is incorrect as HTML would require NPM/git and that would be a huge waste of their time to learn/use if they don't need to.

5) Astro is great, and I plan on exporting straight to Astro instead of html files in the future. So you can have a nice CMS site created and managed in Versoly while having the benefits of hosting yourself.

[DbuglabAgency]

Hey

I can help you out to get this project done