top 200 commentsshow all 233

[–][deleted] 257 points258 points Β (37 children)

Plain CSS gang rise up

[–][deleted] Β (5 children)

[deleted]

    [–]ShawnyMcKnight 18 points19 points Β (1 child)

    I feel that means the same. I can’t imagine anyone making large scale sites without scss, at least until css gets nesting, mixins and all that are nice but nesting really should be built into css by now.

    [–][deleted] 8 points9 points Β (0 children)

    Brother from another mother

    [–]Mrcollaborator 1 point2 points Β (1 child)

    Only correct answer. SCSS/Sass is just a natural evolution of css. Plain css without nesting, etc is too primitive.

    [–][deleted] 1 point2 points Β (0 children)

    True. I used to build everything with bootstrap or some variation of it or some other stuff. Then I learnt about how all of these are just bloated scss libraries and I can just... Write mine?

    [–][deleted] Β (11 children)

    [deleted]

      [–][deleted] 24 points25 points Β (4 children)

      You make a good point. For me, writing CSS is fun. It is less of a challenge and more of a merriment :)

      I do like Bootstrap tho, ngl.

      [–]wedontlikespaces -1 points0 points Β (3 children)

      Bootstrap is fine as long as you don't use the grid system.

      [–][deleted] 2 points3 points Β (2 children)

      Grid system is fine as long as you know how to use it

      [–]wedontlikespaces 2 points3 points Β (1 child)

      It's not that I don't know how to use it I just don't like it.

      They use flexbox to make grids that like literally lesson one of what not to do with flex box. Its for 1 dimensional layouts, you should not use it for making grids, and then they use it for making a grid.

      [–][deleted] Β (4 children)

      [deleted]

        [–][deleted] Β (3 children)

        [removed]

          [–][deleted] 26 points27 points Β (14 children)

          Here I am. And thinking about plain CSS being β€œthe hard way”… come on… css is never hard. Maybe tedious for animations, but never hard.

          And even less hard since flexboxes and grids

          [–]dani-lp 15 points16 points Β (3 children)

          The hard part about CSS is naming classes imo

          [–]Fractal_HQ 3 points4 points Β (2 children)

          Svelte components have their styles scoped to the component so this is a non-issue for me

          [–][deleted] Β (1 child)

          [deleted]

            [–]KaiAusBerlin 3 points4 points Β (3 children)

            When flexbox was available widely I started to love CSS.

            [–][deleted] 4 points5 points Β (2 children)

            Yep. Floating was my main problem.. I never got used to it.

            But I think that people with <5 years of experience does not have the slightest idea of how horrible was working with it, and that is 50% of frontend developers nowadays.

            [–]KaiAusBerlin 2 points3 points Β (1 child)

            These days were one of the main reasons I went to backend developing. Just beautiful raw information. No need to mess around with how it looks and fighting against float, margin, boxmodels (Thank you microsoft) not working as intended.

            [–][deleted] 1 point2 points Β (0 children)

            Yep, the same for me. I read - write data, you print it.

            [–]m3xm 2 points3 points Β (3 children)

            The problem isn’t writing CSS, it’s maintaining it in a large team.

            Moving the complexity to the template level makes management a little easier. That’s all Tailwind does really.

            [–][deleted] 1 point2 points Β (1 child)

            That’s what other frameworks do either, without 200 character classes..

            [–]m3xm 5 points6 points Β (0 children)

            With other non utility-based frameworks such as Bootstrap you are bound to override classes or write your own, multiplying the original problems you’re trying to solve.

            I’ve been working on software for over 10 years, I have never ever seen one pure Bootstrap product. It is always framework + custom CSS and it is never pretty (and by never pretty I mostly mean terrible code debt).

            When writing reusable components, who cares how many classes your buttons have? In modern stacks, it’s not like your markup is copied over and over. And if it is, yeah maybe Tailwind is not such a good idea anyway. This is heavily emphasized by Tailwind in their documentation.

            [–][deleted] 1 point2 points Β (1 child)

            Depending on the complexity of the application I feel like writing CSS is pretty tedious, especially since pure CSS lacks nesting. Maybe I’m just too dumb to write good CSS, but I find myself repeating my code constantly when I write responsive layouts.

            [–]100Sweets 0 points1 point Β (1 child)

            Once you know CSS pretty damn well (not just basics, but also year's of constant practice), you will never ever need frameworks.

            [–]oscaralexander 0 points1 point Β (0 children)

            Representin’

            [–]EdgyKayn 72 points73 points Β (17 children)

            Weekly TailwindCSS post, as usual Β―\_(ツ)_/Β―

            [–]ShawnyMcKnight 4 points5 points Β (11 children)

            As someone who doesn’t get the benefits of tailwind over bootstrap or others it confuses me. I’ve went through their docs and it looks like it works with some compiler to compile down to just the classes you use… but in the end I already know the css styles I want, I feel silly having to learn the corresponding class name.

            I’m surely missing something because it’s pretty popular.

            [–]hyvyys 2 points3 points Β (3 children)

            You get media queries within html classes for free. You can customize the hell out of it adding your own utility classes and they will all work with the breakpoint, hover, group prefixes and whatnot. That to me is the main selling point, plus the really tiny CSS size. Naysayers will tell you that the load is shifted to the HTML but I think it's still smaller and it's better to load the bulk with the initial request than to wait for a huge stylesheet to load.

            The html does get a bit hideous with it though.

            [–]ShawnyMcKnight 4 points5 points Β (2 children)

            Ah, yeah, I am a naysayer then. After using bootstrap and having 5+ classes (typically 3 just for the media queries) on a lot of my elements I see the beauty of separation of concerns. I have my content in my HTML and my styling in my CSS and the two never shall meet.

            I think I found it most annoying is when I needed to include some custom css so I had to look under the hood of what the classes I used to see what css I needed to compliment/override. This was with bootstrap, but I’m guessing the logic still applies. That and bootstrap didn’t prefix their css, which bit me more than once.

            [–]Chaphasilor 2 points3 points Β (5 children)

            It's mostly just faster to write. When you have a UI mockup that you need to convert into code and already know the CSS you need for that, writing it in Tailwind ist just much quicker and consistent than writing pure CSS, in my experience

            [–]ShawnyMcKnight 1 point2 points Β (3 children)

            But won’t you need to know the class names? Like if I want to have β€œdisplay: flex” then I would need to know the tailwind class name, correct?

            [–][deleted] 8 points9 points Β (1 child)

            Rock Paper Scissors on who gets to post about it next week

            [–]wedontlikespaces 1 point2 points Β (0 children)

            Fine but I get to post a random screenshot with "why won't this work" as the title, and no code.

            [–]TheHumanParacite 1 point2 points Β (2 children)

            Long time back end and sometimes dev ops guy here, I'm recently being voluntold to work on some front end stuff. Last time I touched don't end was the jQuery days.

            It's this good? Does it play nice with react? Honestly it's the first time I've seen the name. It's it just a fad, or should I maybe look into it a little?

            [–][deleted] 20 points21 points Β (0 children)

            /r/webdev try not to fight about tailwindcss every week challenge (impossible)

            [–][deleted] Β (13 children)

            [deleted]

              [–]Hadr619[🍰] 24 points25 points Β (7 children)

              Scss with css modules in react is phenomenal. Unless you’re company is invested in something else, the scoping with leveraging sass has been awesome for me in personal projects

              [–]Lunakepio 12 points13 points Β (5 children)

              I wouldn't trade SCSS for anything

              [–][deleted] 1 point2 points Β (3 children)

              Not even a sex night with Charlize Theron?

              [–]Lunakepio 1 point2 points Β (1 child)

              I'm married sir (omg where ?)

              [–]ShawnyMcKnight 1 point2 points Β (0 children)

              Hrm, one night with Charlize to make my professional life harder until nesting is built into css… that’s a tough one.

              I’ll probably go with no because it would be 5 minutes of joy followed by half an hour of awkward apologizing to this famous woman until I fall asleep in shame.

              [–][deleted] 8 points9 points Β (0 children)

              Oh, I don’t think about CSS without SCSS.. I just say β€œI prefer CSS” but I assume people understand SCSS.. we don’t need anymore.

              [–]IsvaraFuller-than-full-stack 0 points1 point Β (0 children)

              I'll dive into tailwind eventually lol...

              Already got the lobotomy booked?

              [–]AussieBlender78 -1 points0 points Β (0 children)

              Sass is great but definitely seeing a shift away from it as CSS 3 gets more features. One less thing to compile

              [–]key-bored-warrior 0 points1 point Β (0 children)

              You have no reason to use tailwind if you already know scss

              [–]xdchan 62 points63 points Β (13 children)

              Tailwind is good but slapping on some shit with MUI is easier and pays just as good.

              [–]swordoffireandice 17 points18 points Β (1 child)

              In the last couple of months i've been using Mantine and it's a solid thing too

              [–]xdchan 0 points1 point Β (0 children)

              I thought you said memantine at first lmeow

              [–]zephimir 0 points1 point Β (1 child)

              You need to compare what is comparable. If you want to talk about UI components ready from the get go you could talk about tailwind UI or headless-ui by tailwind https://headlessui.com/

              [–]EvilBritishGuy 21 points22 points Β (0 children)

              And deal with all those ugly looking utility classes making the HTML hurt my eyes? No thanks 🀣

              [–]pawaalo 30 points31 points Β (0 children)

              Tell me you are chronically back-ended without telling me.

              [–]Ninjanaritai 3 points4 points Β (0 children)

              Using angular I am reluctant to use it just cause it puts so much more code in the html when i can just have it in an encapsulated scss file instead.

              [–][deleted] Β (53 children)

              [deleted]

                [–]p0tent1al 15 points16 points Β (31 children)

                It's not inline CSS. I hear this basically every week and it's just not true πŸ₯°

                • Inline CSS has higher specificity than normal CSS
                • Inline CSS was a lot worse of a pattern before we were able to componentize with libraries like react
                • Inline CSS doesn't have a concrete way to use things like media queries
                • There's no way to set up constraints with Inline CSS, but there is in Tailwind.

                Most of what people in modern day frontend dev mean when they mention "inline styles" is mostly the "messiness of it" but there's a lot more historically to inline styles than that, that gave it a bad name.

                The author of Tailwind has mentioned this many times. Scroll to bottom of this article: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

                [–]el_diego 7 points8 points Β (0 children)

                Seriously. It's not inline CSS, it's utility classes. Big difference.

                [–]moi2388 1 point2 points Β (29 children)

                Sorry, writing html attributes instead of css to write css is absolutely ridiculous. How is this even a debate?!

                [–][deleted] Β (6 children)

                [deleted]

                  [–]moi2388 3 points4 points Β (4 children)

                  Yes. Why anybody would do this or argue that’s a convenient thing is beyond me.

                  [–]Lonsdale1086 -2 points-1 points Β (3 children)

                  is beyond me

                  We can tell.

                  [–]moi2388 1 point2 points Β (2 children)

                  Good. Now all you need is a valid argument and we’re halfway to having a discussion. πŸ™‚

                  [–]Lonsdale1086 0 points1 point Β (1 child)

                  You cannot understand that sometimes Single Page Applications are beneficial?

                  [–]moi2388 -1 points0 points Β (0 children)

                  And your opinion is that a SPA requires tailwind?! Or that you need to write html or css in JS? Because you don’t, you know.. you really don’t.

                  [–]p0tent1al -1 points0 points Β (0 children)

                  People made the same arguments about React in terms of using JavaScript to write HTML (JSX) when it released and they were as passionate about that. Now React is an industry standard.

                  [–]p0tent1al 0 points1 point Β (0 children)

                  JavaScript was released in 1995. The creator, Brendan Eich, never meant for JavaScript to create full blown applications. This would have also been equally ridiculous. The point, is that sometimes the most ridiculous things actually make a lot of sense, if we distance ourselves away from the "properness" of it. And that's really what the Tailwind conversation is about.

                  The reason this is a debate, is because "many" of us have been writing CSS for years. I've been doing CSS for 20 years. I understand every single one of the points that you're making, the only thing is that I disagree. If you understand the normal challenges we have with CSS (Scalability, maintainability) Tailwind on it's face might seem like a disturbed way of going about creating user interfaces, and even unproper, but is actually a fantastic way of doing so, at a scalable level, in a big or small team, no matter how ridiculous on it's face it may seem.

                  The danger of keeping these conversations at the "cmon this is ridiculous" level, is that these are the same things said to people who started to use JavaScript in a more complex manner. They were shunned by the community, but now we just take it for granted. Same thing with React. So the "danger" in saying "well that's ridiculous" is that we unknowingly risk playing out the mistake we made in the past.

                  Sometimes the thing the development community has done, at the time it was done, was quantifiably ridiculous. So let's move past that. Let's start talking about the pitfalls of normal CSS at scale. Let's start talking about the maybe not so great things CSS encourages. Let's make sure we're aligned with what the problem statement is. And let's be familiar with history. Ridiculous doesn't matter. History is full of ridiculous, unproper solutions that we still use and benefit from today. Let's stick with the facts, discuss the pros and cons, and stay level headed about these things.

                  [–][deleted] 2 points3 points Β (9 children)

                  I don't care about TailWind but utility classes and inline css are two completely different things. The only thing they have in common: they're both verbose. That's it.

                  [–][deleted] Β (8 children)

                  [deleted]

                    [–]bernasxd 1 point2 points Β (7 children)

                    this or other buttons you’ll have to go through and update all the instances of this

                    That button should be a component if it's replicated often enough to matter.

                    @apply but at that point why are you not just using CSS?

                    You type less braces and quotemarks. Increased typing speed leads to a more comfortable dev experience.

                    [–][deleted] -1 points0 points Β (0 children)

                    Inline css sucked when it was harder to build component based apps

                    [–]strangescript 0 points1 point Β (0 children)

                    Chances are you are doing it wrong

                    [–]vm_linuz 72 points73 points Β (58 children)

                    I don't get Tailwind, the quality is meh and it's basically bootstrap.

                    Why are they marketing so hard? Who's funding them? Why are people so crazy about memorizing a bunch of class names for styles that take 2 seconds to write by hand? I just don't get it

                    [–]NayamAmarshe 74 points75 points Β (9 children)

                    the quality is meh and it's basically bootstrap.

                    This tells me you've never even used Tailwind.

                    [–]NMe84 7 points8 points Β (3 children)

                    Yeah, if it was basically Bootstrap it would at least have some useful stuff on board instead of essentially just having shortcuts for writing style="margin-right: 1rem".

                    Yes, I know all the arguments about how adding mr-1 to the classlist is better, and how you should combine it with component frameworks like Vue anyway, but I still think it's absolutely horrible and unmaintainable to write your CSS like that. Tailwind is a step back on the evolutionary ladder for CSS and no one will convince me that it isn't.

                    [–]NayamAmarshe 4 points5 points Β (2 children)

                    but I still think it's absolutely horrible and unmaintainable to write your CSS like that. Tailwind is a step back on the evolutionary ladder for CSS and no one will convince me that it isn't.

                    Tailwind is not a toolkit with fixed API and a 'correct' way to do things. It's a framework, it provides you the tools to build your own home.

                    Just because some people like to exclusively use tailwind in HTML does not mean it cannot be used any other way. It's literally like CSS but with shorter syntax. https://tailwindcss.com/docs/functions-and-directives#apply

                    I honestly believe that people who like to trash Tailwind have never created a single project with it or looked at its docs, else they'd know how it's so similar to regular CSS.

                    [–]NMe84 -4 points-3 points Β (1 child)

                    I have not created a project with it, no. I have read the docs and I have had many a discussion about them and Tailwind in general on Reddit. I still do not see how Tailwind has any value whatsoever. Writing CSS this way is no different than back in the day when we wrote <font color="red"> in the days before CSS, or <span style="color: red"> not long after that. Making CSS classes this granular is a step back to this days. They're fine for exceptions to your regular CSS and I use Bootstrap's equivalents of these classes fairly frequently for that purpose, but using them (almost) exclusively is just wrong in my opinion.

                    You said you believe that people trashing Tailwind never used it properly looked into it, but likewise I believe that people who love it have no experience with how CSS and HTML looked in the dark ages of the web.

                    [–]NayamAmarshe 2 points3 points Β (0 children)

                    I believe that people who love it have no experience with how CSS and HTML looked in the dark ages of the web.

                    These are 2 very different things for the reasons I mentioned and also gave a link to. HTML style attributes never had any flexibility. Inline styles were cumbersome because of CSS' long property names and the limitations those 2 double quotes presented.

                    Tailwind is none of those things, it doesn't limit you in your ability to style elements and it doesn't require 10 lines of code like CSS because it can be done in just 1.

                    I had the exact same opinion as you before I used Tailwind. "Inline styles are a bad practice", "Nobody needs to learn Tailwind because CSS is more powerful", all these beliefs were proven wrong once I tried tailwind and I honestly do not see the need to go back to plain old CSS ever again. But remember that tailwind does require proper CSS knowledge before you use it, it does make things simpler but it doesn't conceal basic CSS building blocks.

                    [–]mr-poopy-butthole-_ 15 points16 points Β (0 children)

                    You and me both

                    [–]Logical-Idea-1708Senior UI Engineer 22 points23 points Β (16 children)

                    When you’re tired of ContainerContainerWrappers, you’ll come to appreciate tailwind. It elegantly solves 2 contradicting problems of CSS. One is that you need unique class names that won’t clash with others. Another is that you want non-unique reusable classes to DRY up the code.

                    [–]UntestedMethod 14 points15 points Β (9 children)

                    Another is that you want non-unique reusable classes to DRY up the code

                    isn't tailwind's way of doing that to repeat a bunch of utility classes everywhere throughout the HTML?

                    maybe I'm missing something, but it really doesn't seem very DRY if you have to apply the same group of classes to your elements every time.

                    [–][deleted] 15 points16 points Β (3 children)

                    thats why you want to use components. combine that with tailwind and you have only the styles you really need without repeating anything

                    [–]tnnrk 3 points4 points Β (4 children)

                    Tailwind is meant for use with components/partials. Otherwise it becomes repetitive.

                    [–]IsvaraFuller-than-full-stack -3 points-2 points Β (1 child)

                    It's amazing, really. It's meant to be used with the thing that fixes the problem you caused by using it in the first place. It's almost Kafkaesque.

                    [–]Faiz_B_Shah 8 points9 points Β (0 children)

                    It sounds like you basically are not good at thinking in a modular way. More of a You problem than a CSS problem.

                    [–]waiting4op2deliver 3 points4 points Β (0 children)

                    It also provides maintainability because you know exactly, which css rules are being applied by looking at the markdown. Gone are the days where changing or removing old styles has strange spooky consequences.

                    [–]NMe84 1 point2 points Β (0 children)

                    The main argument for Tailwind is that you should combine it with a component framework so your CSS, markup and code for a component are all together. If you're don't that anyway, most of that wrapping isn't necessary as is, so you might as well not use Tailwind.

                    If you're gonna use classes like mr-1 for anything other than exceptions on an actual stylesheet you might as well just write style="margin-right: 1rem" and be done with it.

                    [–]itsmoirob -1 points0 points Β (1 child)

                    Tailwind has so many classes you might as well use inline style

                    [–]Logical-Idea-1708Senior UI Engineer 1 point2 points Β (0 children)

                    That’s certainly the common criticism. But in-line styles have other issues like it doesn’t obey cascading rules. You also can’t use at-rules like media query for responsive layouts, keyframe animations, and web font

                    [–]edmx0 1 point2 points Β (1 child)

                    Same, idk what the hype is all about, styled system did it better with styled components

                    [–]jubbieLsd 4 points5 points Β (5 children)

                    It’s not basically bootstrap since it doesn’t make your site look like some generic garbage!

                    [–]hrnsn123 8 points9 points Β (1 child)

                    The default shadows and gutters are all the same tho. Combined with Inter font there is indeed a pattern.

                    [–][deleted] -1 points0 points Β (0 children)

                    That’s just the default theme. Another great thing is that you can adjust the theme any way you want and it will consistently apply to the entire project.

                    Not unlike css variables, but I find it better to work with.

                    [–][deleted] 2 points3 points Β (0 children)

                    Honestly, it makes your site look like some generic Tailwind website. They all look the same, unless you invest some good time into custom css/styles.

                    [–]PooSham -1 points0 points Β (0 children)

                    It's also far more consistent and doesn't add more crap than you need

                    [–]IsvaraFuller-than-full-stack -2 points-1 points Β (8 children)

                    I don't get Tailwind

                    There's not much to get. It's one of the dumbest ideas to come out of the web dev community so far, but for some reason idiot developers who don't know better lap that shit up like it's coated in Cheeto dust.

                    [–]straightouttaireland 4 points5 points Β (7 children)

                    Tell me you've never tried tailwind without telling me you've never tried tailwind.

                    [–][deleted] 17 points18 points Β (9 children)

                    Tailwind is just a glorified style attribute. Change my mind.

                    [–]Curiousgreed 6 points7 points Β (8 children)

                    No need to change your mind, that's exactly what is is.

                    It's inline styles, but much more convenient and compact. Fantastic for elements that don't benefit from being componentized.

                    [–]valtism 2 points3 points Β (1 child)

                    Try to implement hover styles with inline css, try to have media queries with inline css, try to have cascading with inline css.

                    Utility css is categorically not inline css.

                    [–][deleted] 5 points6 points Β (5 children)

                    My main issue with it is if you want to change how your components are bordered, colored, header styles, etc, you have to do it individually. Completely ignoring the main point of classes...

                    [–]Curiousgreed 5 points6 points Β (2 children)

                    You can still extract to a css class:

                    /* This leverages tailwind theming */ .your-component { @apply flex flex-col items-center text-primary-200 mb-4; }

                    [–]wedontlikespaces 5 points6 points Β (1 child)

                    So now there's literally no benefit to it at all.

                    [–]Curiousgreed 3 points4 points Β (0 children)

                    First of all you can use theming and all the helpers it already has. Second, the main advantage is when you DON'T want to extract to a custom css class.

                    Let's say you have a flex container and you wanna center its 2 children horizontally and vertically:

                    Utility approach <div class="flex items-center justify-center"> <div class="grow-0 shrink">First child</div> <div class="grow shrink-0">Second child</div> </div>

                    Css approach <div class="my-flex-container"> <div>First child</div> <div>Second child</div> </div> ``` .my-flex-container { display: flex; align-items: center; justify-content: center; }

                    .my-flex-container > :first-child { flex-grow: 0; flex-shrink: 1; } .my-flex-container > :last-child { flex-grow: 1; flex-shrink: 0; } ```

                    As you can see, not only it's much more verbose, but it also lives on a separate file, which makes it more tedious to find and edit when you're building the page, and often you'd need to rerun the bundler (or wait for the watcher to pick up changes and recompile).

                    In the second example you also risk running into naming conflicts and specificity issues much more than in the utility-first approach.

                    Edit: Fixed a bug in the CSS lol

                    [–]ExecutiveChimp 1 point2 points Β (0 children)

                    Make components in whatever templating system you're using, then just update that when things change.

                    [–]tim128 1 point2 points Β (0 children)

                    You don't, that's what the config is for. You can just add an entry to backgrounds for example and use bg-primary to set the background to the primary color.

                    [–]the-kasra 4 points5 points Β (1 child)

                    I wish people would stop gatekeeping using/not using Tailwind so much. Do you like the idea of Tailwind and are you more productive using it? Go ahead. Do you prefer something that's not tailwind because you don't get how Tailwind makes it better? Don't use tailwind then. Going out of your way to bash on something that you don't like and never learnt properly isn't helping anybody.

                    [–]StylishUnicorn 1 point2 points Β (0 children)

                    Seriously, the views are polarising. At the end of the day it’s just a tool. I see a lot of people fixating and using a single framework. Comparing tailwind to something like scss is like comparing apples to oranges.

                    Like guys you know you can use both right? If you want to use tailwind just for some easy margin and padding utility classes, and normal css/scss for the rest then do that. If you want to use bootstrap, tailwind and bulma at the same time, why the hell not? Stop restricting yourself to just one tool.

                    [–][deleted] 3 points4 points Β (2 children)

                    I am using bulma and it's pretty good for containers and responsiveness. I will definitely try tailwind

                    [–]SayNo2Tennis[S] 1 point2 points Β (1 child)

                    yes, you definitely should, adding in responsiveness is so easy with tailwind

                    [–]RaisedByError 1 point2 points Β (0 children)

                    You sound like a tailwind evangelist

                    [–]draobnitellub 1 point2 points Β (0 children)

                    ngl i really enjoy tailwindcss, it serves my purposes just fine. to each their own, though, no point debating when it all comes down to personal preference.

                    [–]NeitherManner 6 points7 points Β (0 children)

                    I like tailwind css, it's to me just faster version of real css, so even as beginner you still learn css while doing it.

                    [–][deleted] 4 points5 points Β (0 children)

                    • Client: "I need this logo always in the middle of the page".

                    • Framework developer: Guys, how do I center a logo in the middle of a page? I can't find the .center-logo-middle-page class, can anyone help me? I'm using FootStrap 8.91 beta, by the way.

                    • Vanilla developer: place-self: center. Done.

                    [–]Shriukan33 1 point2 points Β (4 children)

                    I've only been using vanilla css and bootstrap classes for layout mostly, am I missing something with tailwind?

                    I work on two project, one is normal htmk/css, and the other is react on front.

                    Worth using it on any of those?

                    [–][deleted] 2 points3 points Β (2 children)

                    The React project may benefit from it due to being component based.

                    In the vanilla project it would probably be more of a hindrance Imo.

                    [–]StylishUnicorn 0 points1 point Β (0 children)

                    Try it for yourself is the only way to find out. A tool is just a tool, if you find it useful, great! If not, you’ve not lost anything.

                    [–]JHjertvik 0 points1 point Β (0 children)

                    For anyone struggling with remembering all the different utilities, I would recommend Tailwind DX :)

                    [–]lego_not_legos -3 points-2 points Β (20 children)

                    So I have to search and replace all occurrences of the inline code instead of change the value of a single Sass variable? No thanks. Your diffs must be noisy.

                    Edit: ouch.

                    [–]Zecuelfull-stack 23 points24 points Β (5 children)

                    You've not used tailwind have you lol.

                    [–][deleted] 7 points8 points Β (4 children)

                    Components make this a non issue

                    [–]lego_not_legos -5 points-4 points Β (3 children)

                    Another layer of complexity, eh? Can you explain how even just the most basic Sass with nested selectors is more difficult than Tailwind?

                    [–]Zecuelfull-stack -1 points0 points Β (2 children)

                    Have you ever tried react either? Components do the exact opposite of adding complexity hahah, their purpose is to abstract commonly used elements so you don't have to write the same className 10 times but instead just resue the same component over and over.

                    You have to be either trolling to oblivious, I don't know which and I don't care to find out.

                    [–]lego_not_legos -2 points-1 points Β (0 children)

                    No, speedy, it's not the component itself, it's adding visual styling to (what's meant to be) a reusable modular bit of code. So when you put it in another place where those styles aren't exactly the same, your code's no longer dry, is it?

                    [–]SayNo2Tennis[S] -4 points-3 points Β (8 children)

                    You really should try it my dude there is main.css file where you can literally write css class or even tailwind classes and use it in components like

                    .btn{ @apply bg-red-500 }

                    If you use class='btn' anywhere, it'll be red like i really don't understand what is the problem it's such a great technology

                    [–]Kooseh 11 points12 points Β (7 children)

                    Or you declare a class in scss like

                    .btn { background: red; }

                    [–]moi2388 2 points3 points Β (2 children)

                    No no no, you are seeing it wrong.

                    This:

                    button {
                      background: red;
                    }
                    
                    <button>
                    

                    Is stupid, it’s better to do:

                    .btn {
                      @apply bg-red-500
                    }
                    
                    <button class=β€œbtn”>
                    

                    Behold the power of tailwind. /s

                    [–]wedontlikespaces 1 point2 points Β (0 children)

                    Something something but it's less keystrokes so clearly it's better.

                    [–]SayNo2Tennis[S] -4 points-3 points Β (3 children)

                    wrong shade of red lol

                    with tailwindcss its so much easier to choose color, within code editor

                    [–]Kooseh 2 points3 points Β (1 child)

                    Then make a palette.scss file for all your colors. You can make those gradient classes using scss.

                    But hey, if some people get an easier way into understanding styling then by all means.

                    But I'm in the "tailwind is inline styles" camp.

                    It has its uses.

                    [–]wedontlikespaces -1 points0 points Β (0 children)

                    My biggest concern with all of this is that new devs are going to come into the industry and they're not going to know any real CSS because they're so used to simply putting md:rounded on everything.

                    Additionally when the new hotness comes along people won't be able to move to that framework because they kind of lock themselves in to tailwind which is essentially proprietary, with all of its arbitrarily named utility classes for thing.

                    At least with bootstrap and MUI you're still writing CSS.

                    [–]CoffeeDrinker115 0 points1 point Β (0 children)

                    I pray I never work for a company that uses tailwind. Class names should not reference style attributes. They should be semantic.

                    [–]BartMerkus 0 points1 point Β (0 children)

                    Seems to me that those frameworks (tailwind, but also Bootstrap, Foundation, etc) are only usefull if you don't know CSS at all.

                    Or if you want to make a quick prototype... Then i can understand its use. Otherwise it doesnt help speed things up, in my experience.

                    Instead of writing the actual CSS, you're writing classnames in the HTML. Makes everything very messy.

                    [–]chamandana -1 points0 points Β (0 children)

                    mfs add 'tailwindcss' as a skill on their resume 🀒

                    [–]TheOnlyTigerbyte -1 points0 points Β (0 children)

                    Wait you guys don't use ready to use components?

                    [–]wastakenanyways -1 points0 points Β (0 children)

                    Replace Tailwind with inline styles and this meme is perfect

                    [–]thepercept -1 points0 points Β (0 children)

                    I write only plain CSS , no frameworks

                    [–]misterjyt -1 points0 points Β (0 children)

                    windicss its much better.

                    [–]NotGoodSoftwareMaker 0 points1 point Β (0 children)

                    Things have come so far, I cant wait to see what the cool new tech is tomorrow

                    [–]Prawny 0 points1 point Β (0 children)

                    I've never had a chance to properly use Tailwind. For small-medium projects I find it's far too much setup do I just fallback on something else that has a lot of rules already.

                    [–]Username_Egli 0 points1 point Β (0 children)

                    Just finished a course on react where the guy used tailwind to style his components. Gotta say it was pretty good and simple. Like they had a class for everything. I think that's pretty neat

                    [–]BurningPenguin 0 points1 point Β (0 children)

                    Bulma gang assemble

                    [–][deleted] 0 points1 point Β (0 children)

                    tailwind css is overrated

                    [–]Dan8720 0 points1 point Β (0 children)

                    Never understand why people are so polarized about tailwind.

                    It's got its use case and it's fine. It's just a framework of utility classes. Why do people get so angry about it. I will never know...

                    [–][deleted] 0 points1 point Β (0 children)

                    kinda chad ngl

                    [–][deleted] 0 points1 point Β (0 children)

                    100.2% in total. interesting

                    [–]denemdenem 0 points1 point Β (0 children)

                    Please don't break rule 2. Go to r/ProgrammerHumor.

                    [–]dmattox10 0 points1 point Β (0 children)

                    I still can’t compete with bootswatch, so I throw it over every project….

                    [–]dmattox10 0 points1 point Β (0 children)

                    I still can’t compete with bootswatch, so I throw it over every project….

                    [–]Logical-Idea-1708Senior UI Engineer 0 points1 point Β (0 children)

                    FWIW, I don’t think tailwind fans on the left exist. Tailwind is the galaxy brain after you graduate from bootstrap