I had my doubts, but Tailwind's mantra "looks horrible, but you need to try it!" turned out to be true for me.

You can think of Tailwind as the "APL of CSS." A single utility class can generate a lot of CSS for you, which is one advantage.

The key benefit of Tailwind is that it co-locates your CSS with your HTML, reducing cascading issues and improving maintainability.

Like any codebase, you can use your tools to add more structure and meaning.

For example, I like using a tw function like this:

    export const tw = (...classes: (string | undefined | boolean)[]) => classes.filter(Boolean).join(" ");

Using the tw function, your example classes would look something like this:

    class={tw(
      "fixed top-5 right-5 w-full max-w-xs p-4",
      "flex items-center space-x-4 divide-x divide-gray-200 rtl:divide-x-reverse dark:divide-gray-700",
      "rounded-lg shadow",
      "bg-white text-gray-500 dark:bg-gray-800 dark:text-gray-400"
    )}

I like splitting the classes into logical groups. In this case, I’m grouping by: 1) base positioning, 2) flex behavior, 3) effects, and 4) colors.

Finally, the filter in the tw function allows for easy conditional classes:

    class={tw(kind === "something" && "m-4 p-4")}

I also use Biome, which has a work-in-progress but already quite good class sorter for Tailwind [1]. This keeps the code tidy by applying a logical sort order to each string passed into the tw function.

--

1: https://github.com/biomejs/biome/pull/1362