Join the Webstudio community

Updated 2 months ago

May be a dumb question but how in the

At a glance

The community members are discussing how to bring Tailwind CSS, a popular CSS framework, into a new project. Some community members suggest using Tailwind's naming convention or creating a design system with Tailwind-like classes, rather than importing all of Tailwind's classes. Others mention that Tailwind is a compiler that generates classes on the fly, so it may not be practical to copy all the classes. The community members also discuss the possibility of enabling copy-pasting of Tailwind components in the future, and suggest creating a design system page that can be copied to other projects to get the necessary styling tokens.

Useful resources
May be a dumb question, but how in the hell do you bring in tailwinds to a new project on here?
O
M
A
23 comments
more dumb question: why do you want tailwind here?
I like having the framework and going by the available classes tailwinds provides
so you want tailwind naming convention?
or tailwind ready components that are copy-pastable?
or specifically want tailwind for export?
Naming convention, just have found working with my team when we all use the same framework has been helpful.
if its just naming convention, you can replicate most of it relatively quickly by creating your design system
we might be able to enable copy-pasting tailwind in the future
keep in mind tailwind is a compiler
it generates classes on the fly, because there are thousands
without deep integration of a compiler like that, we can't give you all the classes, but its also pointless, because tailwind compiler solves coding problem when trying to work with classes, which you don't have here at all
we solved the styling organization with design tokens
you could create a design system with tailwind naming convention probably within hours
and copy it as a page to any projects to get the tokens in every project
we should probably have something like that for demo purpose @Alex
I do realize I dont need all tailwinds classes, and there are tons. As long as im able to export my tokens to another project shouldent be an issue πŸ™‚
you can by creating a page and copying it over
its also practical for a project to have a design system page
I was just trying to think of an alternative. Currently we are doing builds with Bricks, Winden/Tailwinds.
if its not linked people won't see it
let us know how this goes!
Thanks for the adivce!
Feel free to clone any section from this one I was working on, might be a good starting point. Most of the naming conventions are the same as tailwind. https://creator-ui.wstd.io/

Edit url (copy from here into your project): https://apps.webstudio.is/builder/c4ad7ced-3376-4a2b-a9bb-f8cb1534ae5a?authToken=832cb33f-64c6-4503-83b4-b6d3e63f164d&mode=edit
Add a reply
Sign up and join the conversation on Discord