Tailwind 3 brackets feedback

[jenstornell]

First, watch the video about brackets in Tailwind 3.

https://youtu.be/3O_3X7InOw8

I think the purposed bracket feature for Tailwind 3 is just brilliant. Both the idea and the syntax with brackets.

I have some ideas for it.

Colors and sizes

Like stated in the video, it's great.

Font families

Good for prototyping, one less place to change.

<div class="font-['Open sans', 'Arial']"></div>

Possible issue

I'm not sure the characters will work ',[space].

Background images

Then background images can change with breakpoints if needed. It's not possible today.

<div class="bg-[my/image.jpg] sm:bg-[my/image-sm.jpg]"></div>

Possible issue

What will happen with an url like https://? I'm not sure these characters will work /:..

Grid

It may look really complex and it may go overboard, but it can be helpful because grids can be quite complex. Else we need to use @apply to make it responsive. For just a single div @apply feels a bit too much. The least we use @apply the better, I think.

<div class="grid grid-cols-[grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))] sm:grid-cols-[grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))]"></div>

Possible issue

Are all characters allowed? I don't know, maybe not (,).