Custom CSS class with Tailwind variants
12:50 22 Feb 2023

I noticed from one website the presence of a class bordershadow. Now this class is not listed in the Tailwind classes.

One unique thing about this class is that, it can have various variants and it seems to accept a color class. E.g. bordershadow-red-500. The color variable seems to change a certain color.

So, as an example, say we have bordershadow-red-500, the CSS definition for that is:

.bordershadow-red-500 {
    box-shadow: var(--colors-custom-1) 0 0 0 0, var(--colors-custom-1) 0 0 0 0,
      var(--colors-custom-8) 0 1px 1px 0, RED_500_COLOR_INSERTED_HERE 0 0 0 1px, var(--colors-custom-1) 0 0 0 0,
      var(--colors-custom-1) 0 0 0 0, rgb(64 68 82/8%) 0 2px 5px 0;
  }

It can accept variants like hover:bordershadow-green-500

What is the name of this and how do you define a class like this.

css tailwind-css tailwind-css-3