Hacker News Reader

Comment by jpomykala | Hacker News Reader

You are trying to solve problems which were created by Tailwind, and you end up with Bootstrap.

I've never used Tailwind, but am familiar with Bootstrap. When looking at the examples, the ones on the right looked pretty much exactly like Bootstrap and I didn't understand what was interesting or novel about it.

Is the code on the left (with lots of classes) actually what tailwind is like to use in practice?

> Is the code on the left (with lots of classes) actually what tailwind is like to use in practice?

As a fan of tailwind, I can say that I initially thought this was dumb and it would be hard to read through a huge number of classes applied to each HTML element. Later, I found that for many of my reusable components, I could combine classes into a single class. As an example, my stylesheet may look like this:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  @layer components {
   .button {
     @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300;
   }
  }

I can now just give all of my reusable buttons the ".button" class instead of the giant string above.

But why would you use @apply instead of something like:

    .button {
        background-color: $gray-100;
        border: 1px $gray-200
        /\* so on... \*/
    }

i don't understand how these "micro" css classes actually help versus just setting the property.

After working with Tailwind for a period of time I came to the exact same conclusion. You can achieve all of this in a better way using CSS variables. You can transform this:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer components {
     .button {
       @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300;
     }
    }

in to this:

    .button {
      font-size: var(--text-2xl);
      padding: var(--p-2);
      background-color: var(--gray-100);
      color: var(--gray-600);
      border: solid 1px var(--gray-200);
      pointer: cursor;
    }
    .button:hover {
      background-color: var(--gray-200);
      border-color: var(--gray-300);
    }

Adjust variable names to taste. No build step, no extra tooling, just as readable in my opinion. On top of that, using CSS variables means that those values can be changed at runtime. You basically get user-driven theming for free.

I'm building an app like this right now and it's been lovely.

I really like this approach - I forget CSS has native variables now (maybe it has had it for a while?) and always think of scss's $variables.

How do you deal with media queries/responsiveness?

I'm on mobile so forgive me for not giving more extensive code examples. In my case, I'm building my app with React, TypeScript, and react-jss. I've got an enum which stores my common media queries and I just use it in the style declaration.

    button: {
      [MediaQueries.Medium]: ... 
    }

I can't use CSS variables for that but I personally don't think it's useful to let the user redefine those queries anyway

It's a straitjacket to reduce inconsistency across different sections of a large app/family of apps - and which help a bit with finding common styles for refactoring.

It's not so much about what you do as a single designer on the initial design, more about what a team of designers do when adding new apos/modules to an existing product.

In theory you could use bootstrap and a theme - but your fellow team members will get lost, re-invent some styles etc.

I'm inclined to solve this problem with discipline and corporal punishment - but I'm afraid the tailwind-people are on to something.

Basically the cascading part of css does not work well for applications / a suite of applications - it works better for actual hypertext documents (like sgml might) - where you can make a layout that works, while the browser handles the user experience (UX). When layout/design becomes "just" part of how an app looks, but the important is how it beheaves (including things like hover, expanding menus etc) - bare CSS doesn't work as well. Not technically, but from a perspective of an evolving code base.

Couldn't you just write a normal CSS class though, instead of going through the rigmarole of Tailwind?

yes!

https://tailwindcss.com

Reply on news.ycombinator.com