DEV Community

Tailwindcss is beautiful ๐Ÿ‘Œ

Kausik Das on June 11, 2022

If youโ€™re not a fan of writing manual css then Tailwindcss can save you a lot of time.

And itโ€™s beautiful. ๐Ÿ‘Œ

Collapse
 
ben profile image
Ben Halpern

I've become a big fan

Collapse
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡

Your boilerplaty verbose templates disagree ๐Ÿ˜…

Collapse
 
liviufromendtest profile image
Liviu Lupei • Edited

Help me understand.

If someone doesn't want to write pure CSS, why would they use Tailwind CSS?

Why don't they just use a no-code tool like Webflow to build a complex website?

Because I feel like Tailwind CSS helps you work 10% faster, but it reduces your flexibility with maybe 60%.

But using some complex no-code website builder helps you work 90% faster, while reducing your flexibility with 60%.

And yes, I know writing code feels cool, we all like to feel like hackers, typing away in our dark terminals.

I'm just trying to understand from a productivity point of view.

Collapse
 
dyland profile image
Dylan Davenport

Iโ€™ve started using WebFlow for my freelance clients and itโ€™s been a nightmare. Iโ€™ve used other similar tools such as WordPress and Drupal and in my experience those tools lower both my flexibility and productivity. Also if I need something a bit more complex Iโ€™m going to have to end up writing PHP or JS code anyways which takes even more time.

For me personally I use Tailwind more for the responsive styles so I save time by not having to write tons of media queries. I can also configure Tailwind to my liking which adds to its flexibility.

Collapse
 
aviavinav profile image
Avi Avinav

At first, I hated Tailwind CSS but over time fell in love with it! I use it in all my projects now.

 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ • Edited

I'm a bit confused as you wrote that in another comment related to tailwind:

  1. Classes can use media queries
  2. Classes limit repeating CSS
  3. Classes allow caching stylesheets longer than the HTML that changes more often.
  4. Classes can include multiple properties at once.
  5. Classes support pseudo selectors and pseudo elements etc.
  6. Classes can define keyframes for animation
  7. Sticking to only classes help with specificity issues.
  8. Classes (stylesheets) can be processed with Post-CSS, SASS etc. Which Tailwind generates classes for media queries etc.
  9. Utility classes don't grow your CSS over time. Much easier to maintain. You're not naming, writing and trying to reuse classes made by someone else.
  10. Classes can apply to new HTML in WYSIWYGS.
  11. Utility classes are easier to document and learn. BONUS: editor / lint support. You get autocomplete to find what you need, and the raw CSS definition.
  12. Utility classes force sticking to design conventions. I.E. all margin and padding is 8px increments, super easy to configure in Tailwind. One can't use some random color either.

And every single point can be reached with regular css/Sass/Scss (that's what's behind Tailwind after all).

I always define the concepts when I feel it necessary, not specifically for you but for anyone who can reach that. This is a forum and not a 1 to 1 conversation.

I'm a Lead Dev/Tech Lead and don't get offended by any of this, thought we were taking into account that newbies can read that and get some basic knowledge about this topic.

If you think so, maybe I've not enough knowledge of Tailwind (used it only once in a tiny project to see what's that about -surface knowledge-) and you (as you said) have not enough knowledge about Styled-Components.

Would you like to do a little challenge? I can write a public repo with Next JS and styled-components using some public API, trying to include all available features and you can re-code a variant using Tailwind so we both get more knowledge of those techs while seeing the pros and cons of each.

I'm hands on 3 projects at once but I'm sure I can get some time. If you (or anyone reading this) feel like it's a good idea I'll put myself hands on asap. ๐Ÿ‘Œ๐Ÿ˜ You name it.

Collapse
 
suchintan profile image
SUCHINTAN DAS • Edited

I have a different take this Kausik ๐Ÿค”. I have used Tailwindcss, CSS3, MaterialUi, Bootstrap, Bulma and Storybook. Even I have tried the preprocessors of CSS like SASS/SCSS.

Let me share what I learned after so many projects ๐Ÿคซ. These frameworks and preprocessors are always useful when it comes to building any high end component like autocomplete dropdown or a calender. But if you use it on normal components, then don't use it.

It's just not worth it, it would always be overkilling a simple thing and very bad in terms of optimizations. So, if you are a good developer, then you will always know when you are overkilling a simple thing and when you are doing it in the easy way โœŒ.

 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ • Edited

Then maybe you should take a try.

A class is a common set of property-value pairs that will be applied to every HTML tag with this class name inside it's class attribute whereas components define visual chunks of your views semantically.

A button will always be a button, right?
Using classes you usually end up with something like:

<button class='btn btn-rounded btn-info'>Edit</button>
<button class='btn btn-rounded btn-warning'>Delete</button>
Enter fullscreen mode Exit fullscreen mode

The btn class would be the basic styling for your buttons, btn-rounded would be a modifier and btn-warning would be a font/color definition.
(Of course you can use "btn rounded warning" but the intellisense will be angry).

Example with styled-components:

<Button appearance="rounded" color="warning" text=`${text}` />
Enter fullscreen mode Exit fullscreen mode

You can programatically or conditionally set values into it, even using states, and the Button component will host every possible definition so it's scoped in a single place.

Anytime you need to extend the button component you simply head yourself to the Button component file and that's all.

<Button appearance="rounded" color=`${error ? 'warning' : 'success' }` text=`${text}` />
Enter fullscreen mode Exit fullscreen mode

You can also import base templating configuration set on a JS const/variable, including breakpoint related things for those media queries and so on (break point naming related with pixel range, max-container width, item gap...)

Collapse
 
decker67 profile image
decker

... but then you learn CSS.

Collapse
 
wrench1815 profile image
Hardeep Kumar • Edited

I saw other comments and I'd say this
I better write inline css then using tailwind.

  1. My markup will not be a spam of css classes
  2. If i use their feature to combine classes or whatever it is(last saw when it was introduced), I'd spend my time copying classes there which is time consuming and doesn't even make sense why use use it when it's gonna be like just any other framework say bootstrap(which people these day flame)
  3. There are other css frameworks to use as well. Like foundation, bootstrap, halfmoon etc

BTW, i was one of those who used to use tailwind when it first came out few years ago. So ye don't think I'm saying it all just because i wanted to or by influencing from internet. It's how i genuinely feel

Collapse
 
liviufromendtest profile image
Liviu Lupei

Hi Luke, hope you're having a nice weekend.

I'm sorry if you saw my reply as borderline spammy.

I see this as a discussion about abstraction and productivity.

Personally, I'm used to writing vanilla CSS and sometimes it got messy.

But I felt Tailwind was just about reusing some CSS that someone wrote, and I felt like that added some limitations, made the development process less flexible.

For me, it was just Bootstrap all over again.

So, I'm just looking to see where folks find the right balance between flexibility and productivity.

 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡

Hahaha no problem, we all can have bad days/weeks ๐Ÿ˜…๐Ÿคท๐Ÿปโ€โ™€๏ธ

I just ignore anything related to job as much as I can when I feel like that.

I'll try to do it during this week (can't promise it will be before the weekend) and share you the repo ๐Ÿ˜

Cheers!

Collapse
 
ivadyhabimana profile image
Ivad Yves HABIMANA

I think Tailwind compared to other CSS frameworks like bootstrap is more similar to writing pure CSS as you will still need to know CSS to understand it's classes (actually good at pure CSS) but whe you get used to it will feel more natural and faster

 
decker67 profile image
decker • Edited

Thats bullshit. You can do it always wrong with ever tool.

Compare these

<button type="button" class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Button</button>
Enter fullscreen mode Exit fullscreen mode

vs

<button type="button" class="default-button">Button</button>
Enter fullscreen mode Exit fullscreen mode

So tell me, what is better to understand and what is faster?
Obviously the second one, or not?

Collapse
 
neifranci profile image
NeilFranci

I'm using both tailwind and scss. I only use tailwind for small components that doesn't need to do with complicated style, animation I use scss for big thing, animation... Because when I read the tailwind docs first seem cool, fast, very easy to use. But when scrolling down, too much setup and I a person who already struggling with the components logic I prefer to keep big thing in scss instead of hard setup thing.

Collapse
 
murashow profile image
Makar Murashov

Tailwind is great to build something fast and when you don't have a custom design, something like back-office or admin panel or just MVP version of your app. But my choice for now is styled-components or any other css-in-js libs.
Styled-components allows you to hold all your styles and logic separately (usually in a separate file), so you can pass props there (which is also has nice typings, thanks TypeScript for that) and SC decides what style to apply based on your prop. I had a chance to build a complex UI using tailwind-like styles, and I can't say that I liked it that much. You have to write a lot of conditions for tailwind classes to style an element, but with SC you could just pass a readable prop there (i.e. isSomething)

Collapse
 
prototowb profile image
Tobias Rauer

I don't understand you react guys. Css-in-js is the worst. People should just write proper BEM.

Collapse
 
khokon profile image
Khokon M.

I'm hearing the term "borderline spammy" for the first time. I was wondering what the term is. Would be a great help if you explain this a bit, as I didn't find any proper defination on google.

 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡

Still can't see any advantage of tailwind over styled components, where you define semantic namings to call visual components to reuse with a custom set of props -or not-, having all those benefits plus using standard CSS on it (or Sass, SCSS...) instead arbitrary presets of utility classes that the entire team would need to learn at the top web standards.

If using React, Preact, NextJS... Using tailwind seems just unpractical in comparison.

I'd say though that it could be a good tool on places where the compatibility with styled components has not arrived yet, even it's just to keep your project as clean of unused CSS as possible.

Maybe Svelte, Vue or Angular are good candidates for it, didn't analysed it as I'm on React/Next since some years ago.

 
decker67 profile image
decker

You say Tailwind will not scale because you say CSS does not scale. It is called logic deduction. Tailwind depends on CSS, and CSS does not scale, you say, so we have Tailwind does not scale. Understood?

Collapse
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ • Edited

That sounds like styled-components but with extra-steps.

A component should be as small as the minimum solution they need to provide, not more, not less.
The styles of the component should not, in any case, define how the component should be fragmented.

Even that, it does not make a template chunk les verbose when using Tailwind. It can be a verbose chunk among other verbose chunks or as stand-alone verbose chunk, with the HTML full o' class names like we're back at 1999 using inline styles. It is what it is, though you can like it or not.

Collapse
 
tmills9208 profile image
Tyler Mills

I loved using it before and I may still use it in some projects for simplicity, because it identifies clearly what important utilities I need all within my react dom elements (which I could transfer to (s)css files at any time).

But now with that in mind, I am learning more with utilizing SCSS for everything, but it sure is helpful when I need to get straight to the point of what layouts and customizations I REALLY need.

Collapse
 
astorrer profile image
Aaron Storrer

I've used it, and there are things I like about it. But something... I don't know, something about it feels wrong to me.

 
khokon profile image
Khokon M.

I got it now. The reason I asked about this is, I thought this might be a prase which may have a separate meaning. Thanks for your time Luke. I appreciate

Collapse
 
prototowb profile image
Tobias Rauer

lol

Collapse
 
mfp22 profile image
Mike Pearson

Inline CSS with extra steps

Collapse
 
decker67 profile image
decker

Vanilla CSS is the base of Tailwind so Tailwind does scale worse.

Collapse
 
bobbyiliev profile image
Bobby Iliev

Tailwind CSS is awesome!

Collapse
 
bw984 profile image
Brady Walters

Tailwind is most helpful for me at mobile first layouts that change multiple times as the screen size increases toward a 27โ€ desktop monitor.

Collapse
 
simeg profile image
Simon Egersand ๐ŸŽˆ

Yes agree! It makes me so much more productive. It's really a game changer for me.

Collapse
 
chismo950 profile image
chismo950

I start using it today, very useful

Collapse
 
ekeijl profile image
Edwin

But aren't components just classes with extra steps then?

Collapse
 
pcjmfranken profile image
Peter Franken

It looks whichever way you configure it to look :)

Collapse
 
rukundob451 profile image
Benjamin Rukundo

What learning resources have you been using for it?

Collapse
 
crazybigworld22 profile image
Crazy Big World

I have been having a lot of fun with tailwind in the of late.

Collapse
 
rayluxembourg profile image
Ray Luxembourg

I kinda feel like its a replacement for bootstrap.
This days i think css-in-js allows more dynamic application building.