Wow! Loving the JIT - plus a quick question

[MartinHughes-BPC]

Fantastic work on the JIT guys! I got it up and running with my Laravel app in about 5 seconds flat! From my experimentation today, I can already see this is going to be so much faster and flow so much smoother than before. Also love the way things can be chained together and the new [] syntax for special one offs.

On to my question, which is related to the new [] syntax. I was living dangerously and played around with a custom height, specifically:

h-[calc(100vh-150px)]

to my complete astonishment, this worked! However I confused myself later by doing almost exactly the same:

h-[calc(100vh - 150px)]

which didn't work (notice the extra spaces between the calculation). I was just wondering why the extra spaces cause a problem?

Anyway, fantastic work 👍👍👍

Cheers,
Martin.

[alexanderbluhm]

@MartinHughes-BPC Yes you can't use spaces in there. Adam explained a bit about why here

[MartinHughes-BPC]

Excellent, thanks for that.

[simonswiss]

Thanks for the kind words @MartinHughes-BPC ❤️

Totally agree with you, JIT is a game changer.

And, fun fact: I also got confused myself when trying to do a calc() function with spaces, until I remembered the discussion about spaces mentioned above 😅

[jenstornell]

I tried what I thought would be a big problem to solve, but it was very simple.

Plain CSS

I wanted to create the following with JIT:

grid-template-columns: auto 1fr 1fr 1fr;

Fail - Tailwind with spaces

The html below will not work because spaces are not allowed:

<div class="grid grid-cols-[auto 1fr 1fr 1fr]">A grid</div>

Success - Tailwind with commas

The brilliant crew seems to have thought about it already, because you can do it like this:

<div class="grid grid-cols-[auto,1fr,1fr,1fr]">A grid</div>

Results

Don't mind the encoding stuff, the grid-template-columns is generated correctly!

.grid-cols-\[auto\2c 1fr\2c 1fr\2c 1fr\] {
  grid-template-columns: auto 1fr 1fr 1fr;
}