Now is the Best Time to Learn Tailwind

Tailwind 4.0 Alpha
💬 Topics:
- Why use Tailwind CSS;
- What is Atomic CSS;
- Oxide Engine;
- Modern CSS;
🥇 Become a Member - / @awesome-coding
✉️ Join the Newsletter - newsletter.awesome.club/
📄 Release notes - tailwindcss.com/blog/tailwind...

[@SamuelCoupland]

Great video! Just stumbled upon your channel. Well underrated. Keep up the good work. Got fireship vibes

[@awesome-coding]

Appreciate it!

[@nanonkay5669]

I am actually considering having the headless Mantine UI for the components and tooling, then Tailwind to style it all to look good. That might be the move, honestly

[@notarjesh]

I value your opinion a lot, so please don't use "Now is the Best Time to" so liberally in all places.

[@alainmorrisdev]

You can still value his opinion while not giving him hate for creating titles viewers will click on.

[@stickyblicky11]

@@alainmorrisdev how is that comment "hate"?

[@awesome-coding]

@notarjesh Fair enough! I appreciate your feedback. As @alainmorrisdev said, KZbin is, sadly, a numbers game. I'm trying to stay away from clickbait titles, but I still have to play the game to some extent... Otherwise these videos will never reach you guys since initial "click through rate" is a very important metric. In other words, if people don't click on the title of your video, YT will just not recommend it anymore regardless of the quality or the information in the actual video. If you click on the video I'm always trying to deliver quality and valuable information, so that I don't waste your time, but I understand that some of the titles might be frustrating for some of you guys. I'll try to do better moving forward.

[@Skuiggly]

@@awesome-coding i think it is better for you to be playing the algorithm than appease a vocal minority of your fans. everyone has opinions, if you try to please every subscriber with an opinion you will lose more than you will gain. as long as you stay true and dont straight up lie then “clickbait” titles is fine. just look at t3 theo and primeagen. don’t hate the player, hate the game

[@awesome-coding]

@@Skuiggly Yep, you are kind of force to play the game since everybody else is playing it. I really get the frustration of some of the guys, especially when titles / thumbnails are way off, so I'm trying to stay true to some core values and don't exagerate the whole thing. It's a fine balance I'm trying to find 😅

[@crab-cake]

tailwind in combination with css modules is very powerful. highly recommend if you haven't given it a try.

[@NexusGamingRadical]

I wish I didn't have to have a giant line though when styling hover: focus: etc: :(

[@hamm8934]

this. They need to change their format conventions to just break the css into multiple lines, at least a different line for each selector, like hover:.

[@namaefumei]

Exactly!

[@MrFlakgorilla]

You could add a linter or something that creates line breaks every pseudo class

[@Soleryth]

Your intro hit me hard Some people use Tailwind because they don't like writing CSS ? Is that the real reason ? I always though CSS and styling websites in general was the most fun part of front end development, as it's instantly rewarding, the visuals are here before your eyes, and the syntax is pretty straight forward. Nice video as always, super concise and informative

[@Trekiros]

Yeaaaah same, that intro absolutely didn't resonate with me. Most of the reasons I've seen for using Tailwind feel like solved problems for me: -Styles should be component-scoped => we have CSS modules already -You can reuse stuff more easily => we have SASS mixins -Utility classes prevent the scope of the CSS bundle from increasing => it makes the JS/HTML bundle larger instead so the gains seem minimal to me, and it's not like you can't write utility classes in raw CSS to begin with? I'd really like to get what the hype is all about but so far, I truly don't see the appeal.

[@Soleryth]

@@Trekiros Me neither, I was hyped and tried it for a new project with a friend. I'm pretty disappointed, it's super verbose, polutes the HTML, it's borderline unreadable as we have a lot of dynamic logic of Vue. I'll give it two things, it's a way better approach than Bootstrap, so if it makes people stop using it, fine. Second it's super default and standard, so if you're a team and need to work on the same project, everyone can understand and contribute without asking for Joe why does this class has negative margins and Jack if you should place something using this property or this class, etc. It's still a well put product, and has qualities but I think it's overused in 90% of the cases where it shouldn't be

[@Soleryth]

@@Trekiros Also SCSS is a blessing, it just makes it 10 times more satisfying to write by removing the repetitive nature of CSS

[@CrimsonBlazz]

@@Trekiros tailwind doesn't ship js

[@Trekiros]

​@@CrimsonBlazz I meant it makes the JSX files bigger, and those usually get compiled to JS Like, instead of an extra 40 lines of CSS, you get an extra 40 classes on the JSX element. There's a tradeoff here, it's not like the entire thing just disappears. Granted a lot of Tailwind's utility classes are like 4-6 lines of CSS so you still gain a bit, but it isn't nearly as huge of a gain as what I've seen people argue online.

[@crab-cake]

tailwind is one of the few good js libraries to come out in recent years. the only downside can be readability but it wouldn't be a javascript library without significant drawbacks.

[@sanjeevdandin9350]

The problem is not with CSS but the most of the Dev's or dev teams don't even maintain or have strict rules when it comes to CSS. A common thing I have seen while working with other devs is that they don't check whether the styling they are trying to implement is already existing in the project or not. Increasing redundant code which gets harder to maintain. The second problem is multiple UX designers on a single project not aligned with same design. Which causes more css related issues.

[@dranon0o]

Tailwind is great BUT i wish to have something in the middle between shadcn and bootstrap simply because not all website require fine design

[@awesome-coding]

Daisy UI? :D (daisyui.com/)

[@smithrockford-dv1nb]

@@awesome-coding I think people should use daisy ui just to see how it's implemented, such that one can make their own lib, as it looks quite bad-i would imagine that design on a children's website.

[@compilejs110]

Can you make videos on design patterns in backend like pubsub, polling and all?

[@awesome-coding]

Hey! Yes - some more in depth technical videos, including design patterns, are coming soon!

[@KrisKamweru]

It's funny how people either really like, or really dislike tailwind. I'm in the like very much camp personally. Recently gone back to a project using scss, and even with mixins and all that stuff, I'm finding myself missing tailwind very much

[@danieluher4186]

can it center a div easily?

[@awesome-coding]

Let's not get that excited...

[@QueeeeenZ]

Why would anyone not love working with CSS?

[@vpetryniak]

Great! Thank you for a quality content! Will go learn Tailwind

[@awesome-coding]

Glad it was helpful! Thanks for the feedback!

[@supercompooper]

I always thought tailwind meant fart

[@awesome-coding]

😂 now that I think about it...

[@jmgutierrez962]

Once you go tailwind, there's no coming back!

[@predaytor]

🤢

[@sanjeevdandin9350]

Used tailwind much to say it is just glorified way of writing inline css on an HTML tag. And my god the amount of ugly HTML code I get from base no config tailwind styling is crazy. Customized Bootstrap styling is still miles better than Tailwind. But gotta say the intellisense I get with tailwind is awesome.

[@paillat]

Bootstrap 🤮 Tailwind ✨

[@Leonhart_93]

To fix the problems with CSS with best to adopt the modular approach of each UI element/component having its own styles, and when something changes or gets removed then the CSS goes with it. Tailwind is just too ugly to look at to ignore.

[@Msyo_Jaber]

👍🇯🇴

[@erickmoya1401]

I still see MUCH MORE value in putting your css where it belongs, like it is done in svelte and vue. Tailwind is a Reacts issue.

[@awesome-coding]

Fair enough!

[@abcq1]

I generally agree with your opinions, but not on this one... Tailwind is just garbage. It's trash, it's the worst, it's a hyped piece of crap, it shouldn't exist. Write SASS.

[@syamsarosa5916]

May I know your reason? I'm not here to judge. Just want to know your reason.

[@awesome-coding]

@abcq1 Fair. I believe that people with good CSS / SASS skills have a hard time understanding why dumping CSS in favor of utility classes makes sense. I get that. Tailwind is just a tool which will resonate with some developers more, but it doesn't make the traditional CSS / SASS approach less desirable.

[@Kasukke]

@@awesome-codingwould be great to see this comparison in the video more in depth

[@cocoscacao6102]

@@syamsarosa5916 Most frameworks have scope styled components, so "atomic" CSS doesn't solve anything. Write more semantic markup, utilize selectors, and you'll get a hell of a lot more consistent code base.

[@sanjeevdandin9350]

@@syamsarosa5916 The reason why I don't like tailwind: 1. Pollutes HTML a lot more than needed. 2. Easy to implement hard to maintain. 3. Maintaining HTML in a project with multiple developers is hard enough introducing a tailwind will complicate even more things. 4. Feels more like inline css than actual semantic classes naming needed. Reasons I like tailwind: 1. Best for small scale projects. 2. Very useful if you are lazy 3. highly customisable

[@alex-craft]

No. The whole Web Dev and UI will be outdated and auto generated by AI in like 5 years or so.

[@vasiovasio]

I do not follow your prediction no matter how the Web has changed in the last 20 years with CMS and Reusable components, Templates, and Everything works of itself, but the reality is different. I have a proposal - both of us to set a reminder in a Google Calendar for 18 March 2029 and Comment again here after five years?

[@alex-craft]

@@vasiovasio ok, lets do it :)

[@vasiovasio]

@@alex-craft Deal! :) I set the reminder and chose a very good Note to be sure I cannot skip it. I wish we both are alive and in good health after five years and of course, robots to not make us homeless and we can see what happens and what prediction is closer to the reality in 2029! ;)