Web Development

wathek , in Tailwind vs. normal CSS - performance and size

Tailwind feels like CSS i have to re-learn. It's maybe slightly easier? mostly it just makes my html unreadable to the point i barely know what's going in anymore.
I don't do much frontend stuff but i'm gonna go back to plain old CSS for my next project.
It all sounds good in theory, but in practice, tailwind has been more work rather than less.
I feel like i put a fair amount of time in understanding how everything works too.

It just really feels like one of those things that makes little difference but i wasted way roo much time on trying to give it it's fair chance.

Strawberry ,

CSS is great and every framework that tries to mix styling with the page markup needs to die

Vincent ,

Absolutely, the goal of Tailwind is not to allow you to skip learning CSS, and if you don't know CSS well, Tailwind is going to be pretty painful.

spartanatreyu ,
@spartanatreyu@programming.dev avatar

I've seen people advocate for Tailwind because "CSS is too hard, I don't want to think about selectors".

CSS isn't too hard, there are easy ways to do things, and hard ways to do things (for backwards compatibility reasons). If you don't learn modern CSS then you're only going to be doing things the hard way.

wathek ,

That's how i got sold on it too. My CSS skills aren't great, tailwind made it just slightly harder to deal with CSS i feel.
Seems healthier to learn actual CSS instead of abstracting it away if the benefit is that low in the best of cases.
Sure, large projects are a thing, but nobody puts a whole project in 1 css file anymore anyway, so what does it matter at that point.

Vincent ,

I've seen people advocate for Tailwind because "CSS is too hard, I don't want to think about selectors".

Yep, those people are wrong :)

(I mean sure, you can sort-of mostly skip selectors if you use Tailwind, but selectors are about the easiest part of CSS. I've never heard of someone struggling specifically with those but not with e.g. layouts, stacking context, relative font sizes, etc.)

snowe Mod , in Static site generator (SSG) alternative to Squarespace?
@snowe@programming.dev avatar

It doesn’t sound like you want a static site generator. You want a Squarespace alternative. One option I use is Ghost. You can host it yourself for free. But it’s not a static site. Static site means static. That means no backend, no forms, none of that. You won’t get a CMS, you won’t get drag and drop components. That’s not what static site generators do.

bonus_crab , in Tailwind vs. normal CSS - performance and size

Having used it in a major project its a shame that its so inefficient because the user experience really is much much better. It feels like a successor language to CSS because it fixed lots of unobvious and badly named attributes and makes lots of things just easier.

The code is more verbose but also you can completely understand how the page will look just by reading the html.

That said it makes sense the performance is so much worse, where you would have matched on one class for N styles you now match on N classes for N styles.

Theoretically its totally possible to do that matching at compile time and 'compile' the string of classes you wrote into individual ones per element for each combination used in the html though.

Kissaki ,

you can completely understand how the page will look just by reading the html

You lose being able to read meaning and structure though, and you also lose technical accessibility.

I like to add css hacks to websites. But I can't if they don't have useful, identifying, and stable selectors.

bonus_crab ,

not really if you use a web framework and actually separate different things into their own components.

but yeah mixing non tailwind css into a tailwind project after the fact would be gross and hard.

Z4rK ,

It seems that we’ll get up to 10x soeedups with v4: https://tailwindcss.com/blog/tailwindcss-v4-alpha

darkpanda ,

The performance improvements in v4 are for compilation times, not rendering.

spartanatreyu ,
@spartanatreyu@programming.dev avatar

Tailwind is only feels like a successor to CSS to developers writing css like it was 10 years ago (or using frameworks that write it like that, e.g. bootstrap), or projects not using visual regression testing.

Modern css is so much better.

  • Want to position, overlap, or align things? Use CSS Grid.
  • Are you using a CMS or component system and want to change the order that CSS is applied? Use Cascade Layers.
  • Want to have resizeable components? Use component queries.
  • Want to make a change all through your site? Use custom properties.
  • Want to style things differently based on how many other elements are inside or around it? Use :has(), +, ~, nth-..., ... selectors.

If you're using something like BEM, or bootstrap to make columns, your knowledge is way out of date and you're doing it wrong.

Assman , in Tailwind vs. normal CSS - performance and size
@Assman@sh.itjust.works avatar

I spent the last week learning and then writing technical docs on tailwind for my org. I was skeptical of it at first, now I have an informed dislike of it.

Cratermaker ,

I often interact with people who don't like something but haven't used it before, so I'm definitely going to steal your term "informed dislike" to distinguish between those cases and ones that are legit gripes.

Templa , in Tailwind vs. normal CSS - performance and size
@Templa@beehaw.org avatar

My spouse (senior fs) just started using Tailwind at work for a new project where he's having to rewrite a component library they have and daily he comes to me to say how much better working with Tailwind is.

shnizmuffin ,
@shnizmuffin@lemmy.inbutts.lol avatar

I (also senior fs, mostly SSGs and Laravel applications) had a similar revelation coming from componentized, precompiled BEM SCSS - I thought Tailwind was weird, verbose, dumb, and bad until I actually used it.

I got to the point pre-tailwind that I was abstracting most of my design elements out, anyway. (Fuck the custom form elements my clients demand.)

Tailwind just starts you at the point of "I abstracted everything" and trusts you to be DRY.

NostraDavid ,
@NostraDavid@programming.dev avatar

What did he use before that though? Kind of important to know where he came from :p

Templa ,
@Templa@beehaw.org avatar

React + SCSS

cosmicrose , in Tailwind vs. normal CSS - performance and size
@cosmicrose@lemmy.world avatar

This person thinks Tailwind is just a grift to make money, prioritizes separations of concerns over all else (I contend they have SoC brain-worms, but I don’t want to get too spicy), and ignores all the actual arguments people use for Tailwind, like how it’s specifically built to suit component frameworks over someone raw-dogging that HTML and CSS. Their argument boils down to “get good” which is the argument that folks use when they’ve never been on a team and have never had to make actual trade-offs.

Kbin_space_program ,

The tailwind style of zero reusability should be quite useful to AI coding, since one its primary flaws is an inability to reuse components.

steventrouble ,

[Thread, post or comment was deleted by the author]

  • Loading...
  • cosmicrose ,
    @cosmicrose@lemmy.world avatar

    That’s from an article that the author wrote recently https://nuejs.org/blog/tailwind-misinformation-engine/

    modeler ,

    Their arguments included the size of the web page, and the time to display the first content, both of which were significantly better in Nue when compared to Tailwind.

    By all means argue on what is important (because what is important for your projects may be significantly different from mine), but there were many points that the author was highlighting, not just the separation of concerns. And for my projects, all these concerns are important.

    cosmicrose ,
    @cosmicrose@lemmy.world avatar

    They’re valid concerns, for sure. I have less issue with this article in particular than I do with some of the other things he’s written. In the context of his other opinions, I feel pretty dismissive of whatever arguments he presents, valid or not. He’s extremely biased and I think folks have to take everything he says with a grain of salt.

    spartanatreyu ,
    @spartanatreyu@programming.dev avatar

    There's absolutely a massive internal bias people have where they naturally believe that others develop the same kinds of content, when really it's half working on page based content, and half working on component based content.

    • Page developers know that putting their styles in the content itself is a disaster when you want to make a global change.
    • Component developers know that putting their styles external to their components is a dx nightmare because developers keep making changes that they think only affects one component when it actually impacts a different component (and that change might not be found until months or years later).

    Both are correct.

    The real problem is developers thinking that there are only two methods for making styles: external css files, and tailwind/atomic styles in class names.

    Component developers should have their styles inside their components, but not inlined in style attributes (like in tailwind).

    Component developers should instead place a style tag inside their component that is scoped to just that component.

    So let's say you're making an accordion component.

    Make your html+js/jsx like you already do, and add an "accordion" class to your component's root element. Now add a style tag in your component with a single selector targetting the .accordion class. Now you can use nesting to style anything in the accordion exactly how you want. Want to style something based on whether an element is open or not? Use an attribute selector. Want to style something based on whether it's child is doing something? Use the :has() selector. etc...

    If you're making a widget system, use container queries. If you're making a card system, use subgrid.

    There's so many obvious use cases that modern css provides for, so use modern css! and not any of this BEM or tailwind nonsense. Now your css is so much smaller, robust and more maintainable.


    Follow up questions:

    Q: But I don't know modern CSS

    A: Learn, it'll be much better for you in the long run compared to using tailwind, then needing to learn something else once people switch off tailwind for something else.

    Q: But wouldn't putting a style tag in every component mean that there's going to be two style tags on the page if I put two of the same component on the page?

    A: It'll only do that if you make it do that. Most component based frameworks are already set up to reduce repetition, check your framework's docs. (e.g. react's many css-in-js solutions, web component's :host selector, vue's <style> and <style scoped> elements, SSGs like Eleventy have Asset Bucketing, and even native html is getting it's own solution this year with @scope).

    Ashtefere , in Tailwind vs. normal CSS - performance and size

    I maintain that tailwind is still an anti pattern. Things like stylex are the way forward for component based systems, I feel.

    shnizmuffin ,
    @shnizmuffin@lemmy.inbutts.lol avatar

    React developer?

    Ashtefere ,

    Only for work, mainly backend though. Personal stuff is solidjs or htmx

    flumph , in Tailwind vs. normal CSS - performance and size
    @flumph@programming.dev avatar

    Why the editorialized title? Why not use the one from the article?

    shnizmuffin ,
    @shnizmuffin@lemmy.inbutts.lol avatar

    They have an agenda on top of the article's agenda.

    rimu OP ,
    @rimu@piefed.social avatar

    I don't know what "semantic css" is, to me that's just normal css. I felt the original title could be confusing for people.

    flumph ,
    @flumph@programming.dev avatar

    But you didn't use the word normal / plain / vanilla. You used proper, which is a loaded word.

    lastunusedusername2 ,

    But plain CSS is proper CSS.
    Tailwind is training wheels for people who don't want to learn CSS.

    Lemminary , (edited )

    That is not true. You do need to know CSS to make proper use of Tailwind for anything beyond changing colors and padding. That's the reason why the Intellisense VS Code extension gives the underlying CSS on hover. I'd love to see a newbie try content layout knowing nothing but Tailwind.

    rimu OP ,
    @rimu@piefed.social avatar

    Oh no, loaded words.

    I've changed it to 'normal' :)

    shnizmuffin ,
    @shnizmuffin@lemmy.inbutts.lol avatar

    You could just as easily use the article's title and save your opinions for the post body or the comments, but you didn't.

    Oh no, implicit bias. Twice!

    HKayn ,
    @HKayn@dormi.zone avatar

    Please just use the original title. Semantic CSS is an actual thing and it takes 2 seconds to google what it is.

    rimu OP ,
    @rimu@piefed.social avatar

    This is kinda strange. You think I'm going to reword my post a second time??

    If you don't like a post, just downvote it or contribute some better posts.

    You're probably pissing in the wind tho as this is the most upvoted post in this community in the last 6 months hahaha https://programming.dev/c/webdev?dataType=Post&sort=TopSixMonths

    intensely_human ,

    That guy just pulled the same "misinterpret what you said, pretend it was your fuckup instead of my own overeager interpretation problem" to me here: https://lemm.ee/comment/10695316

    Your use of the word "proper" was ... proper as a matter of fact. This guy's just an idiot who enjoys adding a confounding interpretation with his own distorting commentary.

    lqdrchrd , in You would think it would be easier for Canadians to get sponsorship

    Immigration is very difficult, time consuming and expensive. Hiring someone already in the country is easy, quick and free.

    Maddier1993 ,

    Which is the #1 phrase repeated whenever I search for how to immigrate to EU/US.

    Which i guess is worth bearing in mind and not place lofty expectations on the immigration lottery.

    doublejay1999 , in What are your favorite e-commerce alternatives to Shopify?
    @doublejay1999@lemmy.world avatar

    Woo commerce had some good integrations.

    I’m not a developer, but I was able to integrate with eBay - keeping stock and orders in sync both ways.

    Far exceed my expectations on a low volumes store.

    podperson ,

    I’m a developer, and WooCommerce, in my opinion, is pretty great. Just like Wordpress, if you look at it more like a development framework, is pretty flexible on what it can do. If you’re not a developer and don’t want to touch code, just buy the plugins you need and go from there. Pretty nice compromise tool between flexibility and ease, although if you have a really tiny budget, the plugins can add up.

    sacbuntchris ,

    How does it compare to the developer experience of Shopify? I hated Shopify. Unforgivable that there wasn't even a way to have a dev environment, but this was a few years ago.

    gofsckyourself ,

    I'm also a developer. My job has me work with WordPress almost exclusively. I run hundreds of WordPress sites and the hosting servers that run them.

    WordPress is not good, nor is woocommerce. They are, however, convenient to the layperson. That's basically all they have going for them.

    WP and Woo are major resource hogs. The data structure is atrocious. There is no ORM and everything is shoved into two tables: posts and postmeta. All your pages, blog posts, products, orders, form submissions, everything is a 'post'.

    99% of all plugins are horribly written garbage that are major security vulnerabilities and updates to patch those security holes frequently break everything.

    WP sites require frequent maintenance to keep them updated to avoid those security issues and since you never know when an update is going to break the whole site you have to do so carefully and make sure you have lots of backups.

    Automattic, the company that makes WooCommerce, is scummy as fuck. Just recently they released an update that added a new cookie which triggered firewalls, and made this new feature on by default. They also are selling all WP.com and Tumblr data to be used for AI. Not to mention the fact they intentionally confuse people into thinking WordPress.com is the same thing as WordPress.org, and since the CEO also controls WP.org they can get away with breaking all the rules of the 501c3 nonprofit's own rules in doing so.

    I can go on...

    Deebster ,
    @Deebster@programming.dev avatar

    I'd written a plugin for WooCommerce as part of working on a B2B service. It was several years ago now, but from what I remember it seemed quite easy to write plugins for because it just used WordPress's hooks system.

    WordPress isn't the fastest codebase around, so you'll probably need to spend more on hosting to get it running well enough, but compared to other PHP e-commerce offerings like Magento it'll fly.

    LesserAbe ,

    I also came here to say Woocommerce, I helped a small retail store set up their shop. I will say if someone doesn't have ongoing support I could see hiccups appearing eventually if you have any kind of customization. There's just a lot of plugins and things you can tweak. But that ability to customize means you can do something just the way you want it, vs bending a system like Shopify to try to fit edge cases.

    demesisx , in What are your favorite e-commerce alternatives to Shopify?
    @demesisx@infosec.pub avatar

    I don’t have a favorite one and I love decentralized tech so I forked Lemmy to try and repurpose it for that. Honestky, I would have done it in Haskell or Purescript had the Lemmy devs not gotten as far as they have been with Rust.

    It probably can’t have 1:1 feature parity with Shopify (actual commerce being handled on pub/sub would be a nightmare) but I at least intend to broadcast inventory changes using (a variant of) the pub/sub protocol. Instances will theoretically be run by vendors (or alliances of vendors).

    I’m at the VERY early stages. I’m currently trying to build Lemmy using nix to declaratively glue together the patchwork they use to build it. I figure having it continuously roll with the original would be helpful for this rapidly evolving pub/sub world.

    rimu , in What's it like to be a Shopify developer ?
    @rimu@piefed.social avatar

    Pretty bad.

    With Shopify you can't run anything locally, it's all in their cloud. So you're constantly typing CSS into a textbox in a web site. Also pretty much every Shopify plugin ("app") costs $5 or $10 per month which adds up fast. Wordpress plugins are pretty money hungry too but it's much worse on Shopify.

    It's ok if you're just making small tweaks to a theme that is already 80% of what you need.

    mac ,
    @mac@infosec.pub avatar

    I never learned Shopify because while it's free to start it's a subscription which for someone learning isn't good.

    I'm glad I didn't though, now I just build the e-commerce platform custom and slap a stripe API for checking out on it.

    gunpachi OP ,

    Wait isn't there something called Hydrogen framework by Shopify. I thought it ran locally.

    rimu ,
    @rimu@piefed.social avatar

    It's been a couple of years since I did Shopify development so things could have changed / improved since then.

    sacbuntchris ,

    Yeah I remember there being a way to use a local IDE but no way to do a local development environment.

    Tramort , in The Evolution of Shiki v1.0

    Knowing this might fundamentally change the way Shiki works, and since we don't want to risk breaking the existing Shiki users with our experiments,

    This is the best way to do things. Thank you! If you date going to introduce breaking changes, COME UP WITH A NEW NAME!

    Kissaki , in Static site generator (SSG) alternative to Squarespace?

    Static typically refers to static pages. Which can have dynamic elements, but no backend.

    IE: you can’t have a contact form without paying a 3rd party.

    Unless you open an email client or other url to forward the contracting I don't consider that (purely) static anymore.

    Given that, I'm not sure what you even want "static gen" for? You may be looking for the wrong thing.

    MaximilianKohler OP ,

    I’m not sure what you even want “static gen” for?

    Speed, security, free hosting.

    Kissaki ,

    If that's your hope for static generating, "contact form with backend" goes against those goals. It's an important requirement shifting the entire viability and weighing of platforms and hosters.

    thebardingreen , in Static site generator (SSG) alternative to Squarespace?
    @thebardingreen@lemmy.starlightkel.xyz avatar

    I would 100% use Wordpress. It's far and away the most mature option with the most diverse ecosystem of plugins. That survey you linked to is hardly a controlled study. I bet a lot of the folks using Wordpress would have low satisfaction with other CMSes.

    Also, part of the problem there is that that Wordpress ecosystem is highly enshittified and monetized (probably contributing to dissatisfaction, especially with people who were messing with Wordpress ten years ago and remember what it was like when there were a million cool Open Source plugins that did what ever you wanted for free). But there is still a lot you can do for free if you know your way around it.

    You can get ChatGPT to write code for you, and it does some things very well, but don't use it if you don't know how to code yourself. It's asking for trouble of both the "security vulnerability" kind and the "I don't know how to put all these pieces together" kind. The best advice is not to deploy any AI written code that you don't understand. AIs confidently make mistakes and get stuff wrong all the time.

    One thing that ChatGPT IS good at is pointing you at Open Source plugins.

    There IS a big security concern with self hosting Wordpress, but wordpress.com's hosting is pretty affordable.

    Given your use case and the fact you seem willing to spend a little money, I think Wordpress with Divi is a solid choice. There are lots of good Divi tutorials on Youtube.

    MaximilianKohler OP ,

    Thanks for your input.

    wordpress.com’s hosting is pretty affordable.

    It's more expensive than Squarespace which is a main reason I chose Squarespace in the first place. I created a test site today to experiment with Wordpress and it seems that Wordpress has as much or more functionality than Squarespace, but much of it is hidden behind 3rd party addons, which may or may not be free. And you basically have to look up articles for "how to do x on Wordpress", whereas with Squarespace it's build-in and easier to accomplish.

    So I think for people starting out, Wordpress is harder to use since you don't even know what it's capable of.

    Divi is more expensive than Oxygen, so if I use something other than Gutenberg it will probably be Oxygen.

    gofsckyourself ,

    WordPress.com is horrendous and extremely expensive, and their practices are scummy. Divi is also fucking garbage. That other user has no idea what they are talking about.

    MaximilianKohler OP ,

    Yeah, that's similar to my conclusions as well. What would you recommend?

    gofsckyourself ,

    Posted a top level comment before I saw this:

    https://lemmy.world/comment/8432934

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • webdev@programming.dev
  • test
  • worldmews
  • mews
  • All magazines