Comment by _akhe

> Tailwind and regular CSS are hardly distinct, it's just slightly different names

Tailwind:

  <div className="shadow-lg" />

CSS:

  div {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }

Not to mention the Tailwind classNames are compiled to CSS in a build step, where CSS is not compiled, it's written in its native form. They're clearly very different syntaxes and approaches, even though one compiles to the other.

The above example shows how convenient Tailwind can be... well if you happen to want that 10px 15px -3px, 4px 6px -4px shadow, but the moment you break out of their palette or default style setup you end up doing stuff like this:

  <div className="bg-[#243c5a]" /> 

Either storing that color value in JavaScript, or creating a Tailwind theme for it in tailwind.config.js:

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a'
        }
      }
    }
  }

Something that could have been easily accomplished in native CSS:

  :root {
    --regal-blue: #243c5a;
  }

  div {
    background-color: var(--regal-blue);
  }

For most React websites, I use Tailwind by default almost always, and Tailwind UI is a great starting point for building a component library. But it still helps to support CSS for more advance styling use cases - even within Tailwind. Knowing CSS very well will make you better at Tailwind too even for common things like

  <div className="w-[calc(100% - 1rem)]" />

It's kinda important to know both as separate technologies.