DEV Community

Discussion on: Understanding Tailwind CSS

Collapse
 
afif profile image
Temani Afif

Why instead of doing

<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
  // Rest of your code goes here
</div>
Enter fullscreen mode Exit fullscreen mode

We don't simply do

<div style="box-shadow:0 35px 60px -15px rgba(0,0,0,0.3)">
  // Rest of your code goes here
</div>
Enter fullscreen mode Exit fullscreen mode

?

What's the benefit of that strange error prone class?

Collapse
 
prakhart111 profile image
Prakhar Tandon

That strange thing is the JIT mode.
As said here,

JIT compiler avoids compiling all the CSS upfront and compiles only the CSS as and when we need it. This results in lightning-fast build times in all the environments.

So basically it's faster and consumes even less space.
Once one get used to with TailWind, it's awesome!

Collapse
 
afif profile image
Temani Afif

How "using a strange class that will later be processed to get transformed into a CSS declaration" can be faster that simply "writing the CSS inline with no processing needed" ?

Collapse
 
romeerez profile image
Roman K • Edited

Normally such stuff shouldn't happen and shadows should be configured to be used as

<div class="shadow-lg" />
// or with color:
<div class="shadow-lg shadow-color-name" />
Enter fullscreen mode Exit fullscreen mode

JIT mode and that ugly class "shadow-[...]" is for rare specific case to do a special shadow just once in one place, and it can be prefixed with hover: to change on hover, it can be prefixed with sm:, md:, lg: classes to be displayed differently on different screen sizes.