Install Tailwinds CSS

At a glance

The community members are discussing the possibility of using Tailwind CSS within a Webstudio project that is self-hosted on Vercel. They are exploring the idea of importing Webstudio-generated pages as components into a custom application, potentially using a framework like Next.js, instead of integrating the custom application directly into the Webstudio app.

The community members acknowledge that this use case has not been catered for yet, and they are trying to determine the feasibility and limitations of this approach. They are discussing potential solutions, such as finding an official way to import Webstudio page components without the framework-specific code, and exploring how to integrate Tailwind CSS into a Remix-based Webstudio project.

There is no explicitly marked answer in the comments, as the community members are still exploring and discussing the best way to achieve the desired functionality.

Useful resources

aazwar

Hello i would like to selfhost webstudio on vercel. Current there some page that i would like to use code base. Is it possible to use tailwinds inside this?
https://github.com/webstudio-is/webstudio/tree/main/packages/cli

24 comments

OOleg Isonen

You want to use code on some of the pages created by Webstudio?

aazwar

actually both created by me and webstudio

aazwar

then implement tailwind css

aazwar

actually i already install the tailwinds but it doesnt work

aazwar

the case become like this because the static page created by our admin which from webstudio

aazwar

then im as developer work on custom page which not using webstudio

OOleg Isonen

do you want to integrate pages created by webstudio into a custom app?

OOleg Isonen

I don't really fully understand what you are doing

ggilatekano

Marketing people will create the marketing pages using WebStudio
For example, from website.com homepage to website.com/some-folders/landing-pages
Export to Vercel, and update from time to time
Developer will custom develop dynamic pages in Vercel + Remix + Tailwind
For example, website.com/directory/dynamic-pages

So both dept will work on the same domain. Doable at this stage? Design system?

OOleg Isonen

I see, in this case you will probably want to import a webstudio-generated page inside your app as a component

OOleg Isonen

@TrySound what do you think is still missing on our side to enable this use case?

OOleg Isonen

I am guessing we need a good/official way for user to import a page component without Remix stuff in it because user can be using any framework potentially

BBogdan

Looks like the requirement is to develop separate routes within same remix app. I think this is doable. Not sure what tailwind requires to integrate into remix though you could write custom template with own overrides (package.json is merged with existing so might not needed), for example --template=vercel --template=./template

aazwar

is it doable to use other framework instead of Remix?

aazwar

btw im referring this doc to integrate tailwinds into remix https://tailwindcss.com/docs/guides/remix

aazwar

but it didnt work on Webstudio Remix Repo, im not sure css clash issue or what

OOleg Isonen

I think its more about using webstudio page as a component without the framework, e.g. from next.js import webstudio page

OOleg Isonen

not integrating custom app inside webstudio but importing a webstudio page inside a custom app

OOleg Isonen

don't try to integrate your stuff into webstudio app

aazwar

is there have any standard or guide to follow importing a webstudio into next js?

OOleg Isonen

we are trying to discuss if its even possible today and what would be the limitations

OOleg Isonen

I mean clearly we haven't catered to this use case yet, even though I knew we need this

OOleg Isonen

the question is at the current stage how hard is it to add a support for it today

Add a reply

Join the Webstudio community

Install Tailwinds CSS