Trying to understand how to set default border CSS property at specific scope

[endigo9740]

Hey folks, here's a minimal example of the issue. Uncomment only one of the default border properties at a time in the CSS tab:

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

My expectation is regardless of @theme or data-theme scope it would adhere to the value defined. But currently this is ONLY set at the @theme scope.

The goal here is to be able to control these defaults using a user-defined theme file which is imported from a external source. This would be much more streamlined using the data-theme selector method.

[wongjn]

border compiles to:

.border {
  border-style: var(--tw-border-style);
  border-width: 4px;
}

Notice how the --default-border-width isn't referenced anywhere, hence why the data-theme selector has no effect. You can workaround this by using your own CSS variable: https://play.tailwindcss.com/j4uS9YN53T?file=css

[endigo9740]

Hrrm, yeah that's what I was thining. Ideally we wanted all our users to be able to continue using the default border utility for their "default" border size. Moving to a custom utility is a bit of a bit of a side step (and migration for our users). But if that's the only way to accomplish it I understand. Thanks for the help Justin!

[wongjn]

It's still using the border class name though.

[endigo9740]

Gosh, it's the end of the week. I completely misread that. You're right, that's perfect. Thanks!