Adam Wathan - Tailwind CSS: It looks awful, and it works - Rails World 2023

In his talk at #RailsWorld, Tailwind CSS creator @AdamWathan of @TailwindLabs will explain why “separation of concerns” isn’t the right way to think about the relationship between HTML and CSS, why presentational class names lead to code that’s so much easier to maintain, as well as loads of tips, tricks, and best practices for getting the most out of Tailwind CSS.
Links:
rubyonrails.org/
tailwindcss.com/
#RailsWorld #RubyonRails #Rails #railwindcss #tailwind #frontend
Thank you Dell APEX for sponsoring the editing and post-production of these videos. Visit them at: dell.com/APEX

Пікірлер: 70

  • @ruslansteiger
    @ruslansteiger7 ай бұрын

    Data attributes, data attributes, DATA ATTRIBUTES 😂

  • @simonswiss
    @simonswiss7 ай бұрын

    Great talk, Adam 👊 Also holy crap, you look FIT AF 🔥

  • @MickaelChanrion

    @MickaelChanrion

    7 ай бұрын

    Right?! 😮

  • @wkjagt

    @wkjagt

    6 ай бұрын

    It's because he's been doing a lot of the heavy lifting for us.

  • @bezludny

    @bezludny

    3 ай бұрын

    That's what happens when you write a lot of CSS classes.

  • @mirasmustimov1504
    @mirasmustimov15047 ай бұрын

    Fantastic talk! I found myself enjoying styling html after I started using tailwind. And it is so productive! Love it!

  • @JacquesvanWyk
    @JacquesvanWyk7 ай бұрын

    Tailwind to me does not look ugly. Great job. Learn a few tricks here.

  • @PensarXYZ
    @PensarXYZ7 ай бұрын

    wow! I will use Tailwind for my next project. Super cool demo.

  • @dream_emulator
    @dream_emulator3 ай бұрын

    This is another GREAT presentation from this Rails day. Next time I got to be there!

  • @kengreeff
    @kengreeff7 ай бұрын

    So good! So many tricks in this one.

  • @nabeel-shakeel
    @nabeel-shakeel7 ай бұрын

    Nice talk! Really enjoyed it

  • @DenisSoloshenko
    @DenisSoloshenko7 ай бұрын

    Great talk!

  • @SandyVanderbleek
    @SandyVanderbleek6 ай бұрын

    what is he using in vscode for the browser preview? I can't find the extension

  • @switzerland
    @switzerland7 ай бұрын

    For the edgy ones out there. I complement bootstrap with tailwind. Tailwind get it's own scope with tw- and I love it.

  • @jp2886
    @jp28867 ай бұрын

    Still not convinced - CSS in HTML so why not just do CSS? And classical Wathan - use divs and ps because why not to ignore semantic tags and screen-readers.

  • @bastost
    @bastost7 ай бұрын

    Tailwind is amazing! Thanks!

  • @jeffhicks6068
    @jeffhicks60687 ай бұрын

    What VSCode extension is used for the preview?

  • @codedusting

    @codedusting

    6 ай бұрын

    Search tailwind in extension and look for the official tailwind intellisense one.

  • @krisvanderven2367
    @krisvanderven23677 ай бұрын

    I used it and I love and hate it. I love the utility classes, I hate the readability. I hate how you micro manage the browser, instead of let the browser do the heavy lifting. Probably works great in react where everything is a component, even your link and button. But when it's not, changing the color of a button or a link can be a little more hassle.

  • @FirstWeGolf
    @FirstWeGolf7 ай бұрын

    Trying to use it but buggered if I can get it working

  • @tomasvalent3876
    @tomasvalent38765 ай бұрын

    I thought I know Tailwind but every time I watch any of Adam's videos I learn something new 😮( he has a KZread channel, I recommend checking it out)

  • @xiaohui-dev
    @xiaohui-dev7 ай бұрын

    What extension makes erb to be previewable?

  • @MassimoDeMarchiyolo

    @MassimoDeMarchiyolo

    7 ай бұрын

    I was wondering that too!

  • @DaronSpence

    @DaronSpence

    7 ай бұрын

    It's the built in VScode preview server. You can tell it to render any arbitrary URL and reload when a file changes.

  • @xiaohui-dev

    @xiaohui-dev

    7 ай бұрын

    @@DaronSpence at 13:19 I noticed the command is Responsive Preview: Open URL, seems it's not a built in VScode which name is Simple Browser(I guess you were saying this)

  • @klanowicz

    @klanowicz

    7 ай бұрын

    Please ping me of anyone will find it 🙏

  • @heyimamaker
    @heyimamaker7 ай бұрын

    How else can you tell that Adam Wathan is Canadian? Only Canadians would get this reference "It looks awful, and it works"

  • @dream_emulator
    @dream_emulator3 ай бұрын

    👏👏👏

  • @mooktakim
    @mooktakim7 ай бұрын

    Devs that grew up with React are fine with this. Inline all the things.

  • @rajeshbudhathoki7888
    @rajeshbudhathoki78887 ай бұрын

    Then I got here!

  • @atom6_
    @atom6_5 ай бұрын

    i am using vimesh style - which is fully compatible with tailwind, except it is a javascript library, only 30KB. Together with alpinejs, extremely powerful. No more "building" stuff (which i truly hate).

  • @_mball_
    @_mball_7 ай бұрын

    I get it. It's an awesome idea, but it still feels hard to maintain consistency. Partials are a good tool, and using this with WebComponents does make sense to me. View Helpers also feel like a good too. Still, I can't help but read the code and have to spend a lot of time parsing the sum total of CSS properties... There's an entirely new syntax of kind-of-but-not-quite class definitions.

  • @sheldon98c
    @sheldon98c5 ай бұрын

    When I started using flexbox and grid I feel like superman. Than I started using them in tailwind now I feel like Voldemort with infinite powers.

  • @Raubritterr222
    @Raubritterr222Ай бұрын

    The best part of Tailwind -- you don't need to come up with those pesky names for CSS classes!

  • @wbjxfkwsklejfde34d
    @wbjxfkwsklejfde34d7 ай бұрын

    Interesting talk. Some people find this awesome, and thats great. I've recently inherited a rails/tailwind client and its pretty bad. For example, the developer struggled to maintain consistency, because everything is inlined. Extracting page content into a cms requires deleting all the classes and applying the styles in css. Its more complicated to figure out what has broken when something goes wrong. Stylisticly I'm not a fan, because I dont want my templates extra complicated. Styling/CSS isnt the only thing that needs thinking about in a template and its much better for me to keep that away in a css file, making the erb templates more readable. Just my 2c.

  • @codedusting

    @codedusting

    6 ай бұрын

    Pretty sure there is some vscode plugin or something out there that can help with this problem...

  • @wbjxfkwsklejfde34d

    @wbjxfkwsklejfde34d

    6 ай бұрын

    @@codedusting not really no.

  • @samuelkamau1550
    @samuelkamau15507 ай бұрын

    and that's how i became third😄

  • @Alex-lu4po

    @Alex-lu4po

    7 ай бұрын

    To me you are first.

  • @dorstox
    @dorstox7 ай бұрын

    This modern frontend styling is making my head spin. I'm a Laravel developer and tried and failed to like tailwind so many times! This video did not win me over. Until something easier comes around, I'll be using bootstrap, bulma or better yet rely on frontend colleagues. It's gotten complicated and there is a lot to memorize, even with the fancy autocompletion of the IDE.

  • @FranciscoQuintero

    @FranciscoQuintero

    7 ай бұрын

    It's fine. You use what makes you most productive.

  • @dominuskelvin
    @dominuskelvin7 ай бұрын

    I got here first 😌

  • @cristianbilu
    @cristianbilu7 ай бұрын

    Talwindcss is ugly, but readable and declarative. And for me, that’s a win

  • @MrGeorgeTheCat
    @MrGeorgeTheCat7 ай бұрын

    Why not just use the style attribute and have some helper classes for the magic. I would like to see all examples compared to that.

  • @erictwilegar
    @erictwilegar7 ай бұрын

    We have trapped ourselves in a prison made of html and css.

  • @alexeybobr4537
    @alexeybobr45377 ай бұрын

    It looks like more brutal version of bootstrap for me. Not sure how to memorize all these classes.

  • @codedusting

    @codedusting

    6 ай бұрын

    You don't. Vscode has a plugin so does prettier for sorting the classes for consistency and jetbrains has its own plugin.

  • @ScottHillson
    @ScottHillson6 ай бұрын

    A horrible solution in need of a problem.

  • @user-xedwsg

    @user-xedwsg

    3 ай бұрын

    correct.

  • @CraigMcNicholas
    @CraigMcNicholas7 ай бұрын

    Thanks I hate it.

  • @TheCebulon
    @TheCebulon3 ай бұрын

    I tried it - and I really, really don’t like it!

  • @mauriciomdea
    @mauriciomdea5 ай бұрын

    No, thanks.

  • @jamescattanach1129
    @jamescattanach1129Ай бұрын

    So rails goes to great lengths to provide maintainable html and you've just totally gone against the grain. Perhaps it would be better if you actually understood exactly what Rails is about before presenting this. It's definitely not for me

  • @railsofficial

    @railsofficial

    Ай бұрын

    Hi James, please keep it friendly. Adam is well aware of what Rails is about. It might not be for you, but he was invited to speak at Rails World and we understood beforehand what his talk was going to be about. - Amanda, Rails Foundation

  • @jamescattanach1129

    @jamescattanach1129

    Ай бұрын

    Nothing unfriendly to see here 😊

  • @penn_robotics
    @penn_robotics7 ай бұрын

    Ah yes, ... certainly WAAAYY more readable than 💍💍💍🎪

  • @aniforprez

    @aniforprez

    7 ай бұрын

    yes actually

  • @MickaelChanrion

    @MickaelChanrion

    7 ай бұрын

    6 months later, tell me what css is applied to this without opening the css file that applies its style. Heck, if not even multiple files. Just one of the many benefits from using this mean tailwind! ☺️

  • @jl789nz

    @jl789nz

    7 ай бұрын

    I don't think any one said it was more readable. Declarative naming also has it's own readability issues. I'm still not fully sold on Tailwind. It does help solve some issues, but it also comes with its own issues. It's trade offs all the way down.

  • @MickaelChanrion

    @MickaelChanrion

    7 ай бұрын

    I'd say it's not readable but discoverable

  • @manojlds

    @manojlds

    7 ай бұрын

    ​@@MickaelChanriondoesnt it make the html template itself worse. To grok it you need more cycles now.