Functional utilities with text value

[alinnert]

I have a grid using grid-template, which means I have named grid areas like header, sidebar, etc. I wanted to create a utility class to quickly place elements in a specific grid area and use them like this: area-header, area-sidebar, etc. But I can't figure out how to do that as it seems that only numeric values are accepted but I need to use raw string values in this case.

I've tried the following, but none of these work:

@utility area-* {
  grid-area: *;
  grid-area: --value(*);
  grid-area: --value(string);
  grid-area: --value(text);
  grid-area: --value(integer); // This already passes the value as-is, but only if it's a number.
}

Of course, I can use [grid-area:header] but a utility class would be nice.

EDIT:

I could also create a simple utility class for every possible value, which provided better code completion. From that point of view it would be nice if enums were supported to create those utilities a lot quicker. I don't know, something like the following:

@utility area-* {
  grid-area: --value(enum:header,sidebar,content);
}

[wongjn]

Set up your enums as theme variables under a namespace and then reference that namespace in the utility:

@theme {
  --grid-area-sidebar: sidebar;
  --grid-area-header: header;
}

@utility area-* {
  grid-area: --value(--grid-area-*);
}

https://play.tailwindcss.com/XvTqGtDkJ5?file=css

[alinnert]

Ah, that works too. Thank you!

[libondev]

Set up your enums as theme variables under a namespace and then reference that namespace in the utility:

@theme {
  --grid-area-sidebar: sidebar;
  --grid-area-header: header;
}

@utility area-* {
  grid-area: --value(--grid-area-*);
}

https://play.tailwindcss.com/XvTqGtDkJ5?file=css

Is it feasible to set variables on the current element? Or must it be set in namespace?

https://play.tailwindcss.com/MU5v9Tby9V

[libondev]

Set up your enums as theme variables under a namespace and then reference that namespace in the utility:

@theme {
  --grid-area-sidebar: sidebar;
  --grid-area-header: header;
}

@utility area-* {
  grid-area: --value(--grid-area-*);
}

https://play.tai​​lwindcss.com/XvTqGtDkJ5?file=css

Or I hope it can work like this: https://play.tailwindcss.com/pPL3X0Znsr?file=css