Join the Webstudio community

Updated 2 months ago

Reasons to Consider Using Tailwind CSS

At a glance
The post asks "why not use tailwind CSS?". The community members discuss the pros and cons of using Tailwind CSS. Some key points:

- Tailwind provides a grid system out of the box, which is seen as a benefit.

- Tailwind's predefined classes can be used as a design system, similar to tokens, and the naming convention can be adopted even without using Tailwind.

- Tailwind's functional class names are seen by some as a new language that is unnecessary.

- With the upcoming release of CSS variables, the need for Tailwind's functional naming style may become obsolete, as variables can be used to define sizing and other values.

- Some community members feel that the manual effort required to set up Tailwind adds overhead compared to using an existing design system or style guide.

- Potential solutions suggested include using templates, a token marketplace, and improving the ability to import tokens.

There is no explicitly marked answer in the comments.
why not use tailwind CSS ???
J
S
O
19 comments
A different perspective on your question... "why use tailwind CSS"?
It supports grid system out of the box. which is neat.
you mean classes like "grid-cols-1"? these are similar to tokens and can be just imported as a style guide / design system using any webstudio style guide or your own.

In the essense these are just names you can define. The fact that they are predefined in tailwind essentially means you could create a bunch of tokens using tailwind naming convention if you like them
see it this way: tokens allow you to use tailwind or any other convention, more so they allow you to style locally without a lot of custom syntax e.g. top-[117px]
tailwind classes are partially effectively a new language which you don't need
its good to have predefined values for spacing, typography, grids to have a constrained design system, but you don't have to use tailwind for that, its just the design system
with variables that are going to be released, tailwind-like functional naming style will become completely unnecessary
Because you get to define or sizing values as variables. And tokens could then be mostly semantic, based on the entity name, not function.
I agree. That is not the issue. I think the issue is rather the fact that you have to manually add a lot of stuff that already exists sompleplace as a file
there will be room for some functional tokens still, but the all-functional tailwind will become completely unnecessary
This adds overhead from a work pov
this is something that can be solved once usng a template and shared with everyone
I think functionality similar to importing tokens could also be solved to some degree
Alternatively having a token matketplace section? Which could be public or private to the org?
copy-pasting of css and variables will certainly come as well, but you can just use a template
Again its just a template
all marketplace items are just templates
from marketplace or shared as a project its all the same
Add a reply
Sign up and join the conversation on Discord