Visual effects overwrite each other.

[NikitaIT]

Let's say we want to create a green medium inner shadow in a circle from the edges towards the center.

shadow-inner shadow-green-500 shadow-md rounded-full

Is it works? - No.

While all utilities are quite flexible, but visuals and animations always force me to write css separately. And then abstract it into a configuration.

I would really like to be able to first write this quickly using ready-made classes defining css variables 1 to 1, and then put it into a repeating patterns configuration.

This approach is declared as the goal of tailwind. And I don't understand why we're not being honest about it here.

You can also notice that when defining shadows, variables appear that do not have equivalent classes.

.shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 rgba(0,0,0,.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: 
+    var(--tw-ring-offset-shadow,0 0 #0000), 
    var(--tw-ring-shadow,0 0 #0000),
    var(--tw-shadow);
}

Or in conflict:

.shadow-inner {
+    --tw-shadow: inset 0 2px 4px 0 rgba(0,0,0,.05);
    --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
    box-shadow: 
    var(--tw-ring-offset-shadow,0 0 #0000), 
    var(--tw-ring-shadow,0 0 #0000),
    var(--tw-shadow);
}
.shadow-yellow-600\/50 {
    --tw-shadow-color: rgba(202,138,4,.5);
+    --tw-shadow: var(--tw-shadow-colored);
}

It certainly works, but with varying degrees of success.

[NikitaIT]

Let's dig deeper. Shadows always match the light source. Speaking of light, we usually mean 3 types of sources:

• reflection of light from objects (layering shadows)
• the main source of "scattered" light like Sun or lamp
• own light (when we don't define shadows, objects still have brightness)
• ... I don't think you are using anything more complex

The main source of scattered light has same offset-x | offset-y

// offset-x | offset-y | blur-radius | spread-radius
box-shadow: 
  inset 
  offset-x 
  -offset-y // - if lamp top left, or else +
  var(--tw-how-scattered)  // it should be inited with 0 for dev next params, 0 - projector(SpotLight), inf - Ambient Light
  var(--tw-how-far-is-the-lamp) // we should hold this param at 80% for deep objects and 100% for flat
  var(--tw-shadow-color) // if we use black color - shadow is shadow,  if we use white color - 

It is worth noting that on the web, the light source is always in front of the monitor screen, and not behind it or to the side.

If we are talking about a spotlight, then it cannot be done with a shadow, it will be either a radial background for source or a linear gradient background for object "shadow". So, ±(size-of-object / 2) <= --tw-how-scattered <= size-of-object.

For most cases, we want to fix the coordinates of the light source. Groups can be used for this.

.group/sun -- set offset-x | offset-y 
  .group/sun:shadow-[10px_1px_3] -- set 

That's all. We need to figure out how to do it right.