Tailwind vs Semantic CSS
nuejs.org
Comparing two identically designed websites, their weight, amount of HTML and CSS, rendering speed, and best practices.

This study compares two websites with similar design: the commercial Spotlight template from developers of Tailwind vs the same site with semantic CSS.

  • spartanatreyu@programming.dev
    2·
    4 months ago

    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.