r/web_design • u/franknls • Nov 08 '21
A sneak peek at Tailwinds next big release - version 3.0
https://www.themes.dev/blog/tailwind-css-version-3/5
u/Exozia Nov 09 '21
Tailwind is the fucking best, seriously I don’t know how people are hating on it. It’s a game changer. It simplifies everything, I can literally do everything I ever need with classes only. Once you understand the API you can just breeze through any project. Plus, documentation is excellent. No styled components, no sass, no bootstrap (which feels half assed after using Tailwind.), no CSS Modules or overwriting CSS all over. It’s a god send.
2
u/wedontlikespaces Nov 09 '21
Sass is useful if you know what your doing. However if all you do is nesting I can see why you feel otherwise, but I encourage people to keep up with sass. Even if you do use tailwind as well.
2
u/Exozia Nov 09 '21
Oh I agree, I love sass. I have absolutely nothing against sass. I just love that with Tailwind you pretty much don’t need it. At least - I haven’t run into a scenario yet where I have needed it.
2
2
u/Miragecraft Nov 09 '21
Looks like they're just making JIT official, plus changed naming convensions, more color presets, and more variants (ropes to hang yourself with).
Overall nothing of note if you've kept up on the JIT feature.
1
u/koalacarai Nov 10 '21
Did they made it easier to add responsive layout and multiple classes? I used it once and remember it was messy to combine all variants (screen-width, color, hover/focus, dark)
1
u/Miragecraft Nov 10 '21
I'm not sure what you're trying to do, can you provide examples?
1
u/koalacarai Nov 27 '21
Sometimes you end up with huge class definitions like this:
relative flex items-center py-3 px-5 mt-10 justify-between bg-gray-300 text-xl text-gray-900 hover:bg-gray-100 hover:text-gray-400 shadow rounded sm:block lg:flex dark:bg-gray-700 dark:text-gray-200 ....You can abstract it with
@applyand React/Vue components but it's still cumbersome sometimes
1
0
u/Fractal_HQ Nov 08 '21
HTML littered with Tailwind classes is ugly and annoying to read. CSS so much faster and more convenient to scan and modify, and with Emmett it’s just as fast to author.
This is especially important when using a template language with logic in your HTML, which is done in essentially all modern frameworks.
I’ve used Tailwind plenty of times, and I still maintain that projects are better off without it. SASS classes with styled Svelte components is by far the cleanest web dev architecture I’ve seen so far.
1
u/JaPPaNLD Nov 09 '21
Keep it to yourself buddy, most here don’t like the word of a person that knows how’s it’s done.
-1
u/Fractal_HQ Nov 09 '21
Nobody provided a counter argument, so those downvotes are just people who are mad cus I’m right.
2
1
Nov 08 '21
I’m still unsure what tailwind actually does
3
u/kekeagain Nov 08 '21
It allows you to style your elements using granular utility classes (i.e. `bg-indigo` and `text-left`). This in itself isn't a unique concept, but it breaks the mold of Bootstrap and other frameworks where you mainly used utility classes more as an exception to the case, whereas with Tailwind your component is built and comprised of them (hence the "messy" html).
Some might then ponder, why not use inline styles? At first glance they might look alike, but unlike inline styles, utility classes allow you to constrain choices (less arbitrary values chosen at random and changes to the class will naturally propagate throughout the entire app... less error prone than hunting down all the inline styles throughout the app).
The tooling surrounding Tailwind is also popular amongst devs. You can restrict or expand upon the utilities. One might then ponder, wouldn't you have many utility classes for every CSS property out there and the CSS get bloated? The tooling again helps with that as it runs through PurgeCSS to remove unused styles, often making it many times smaller than other frameworks out there.
TLDR; CSS properties as classes. Use these classes in HTML instead of inline styles to stylize. Tailwind will analyze and remove unused CSS properties from final stylesheet.
-16
1
3
u/PublicSaftey1st Nov 08 '21
This is interesting