How to make tailwind maintainable

Question

This is one of the Netflix pages

Compared with the class name (.checkbox) that uses a specific name, using tailwind requires adding a lot of class names (e.g. mr-1, mt-2). After many people maintain, the strings in the class name will become many.

I think this will be difficult to maintain and read. Someone has the similar experience using tailwind. How do you solve it?

Answer 1

TailwindCSS allows you to still add custom CSS files while using their syntax using directives. You can read about it here.

https://tailwindcss.com/docs/functions-and-directives

Instead of having to write inline code everywhere like

<div class="p-4 m-4 flex-row">

You can create directives that you can use the same as regular classes.

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

@layer components {
  .row {
    @apply p-4 m-4 flex-row;
  }
}

Which then allows you to write less class names

<div class="row">