How to change the e.g. borderradius on the fly based on a database entry #3048

sven09 · 2020-12-09T23:37:19Z

sven09
Dec 9, 2020

Hi,

Scenario: We would like to change/disable the borderradius for elements like containers and buttons (etc.) based on a flag in the backend.

What is the best way to change borderradius on the fly for all items that have a certain class?
I think it can work similar to the dark mode feature:
(https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually)


<!-- NotRoundedMode not enabled -->
<html>
<body>
  <!-- Will be rounded -->
  <div class="rounded NotRoundedMode:rounded-none">
    <!-- ... -->
  </div>
</body>
</html>

<!--  NotRoundedMode enabled -->
<html class="NotRoundedMode">
<body>
  <!-- Will be not rounded -->
    <div class="rounded NotRoundedMode:rounded-none">
    <!-- ... -->
  </div>
</body>
</html>

Is this the best approach?

Any hint would be very helpful.

Many thanks.

simonswiss · 2020-12-14T02:10:59Z

simonswiss
Dec 14, 2020

Hey!

That would work with a custom variant if you want it to work without needing any JavaScript.

Another solution would be to use a little JS to dynamically toggle the rounded class on various elements.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to change the e.g. borderradius on the fly based on a database entry #3048

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to change the e.g. borderradius on the fly based on a database entry #3048

Uh oh!

sven09 Dec 9, 2020

Replies: 1 comment

Uh oh!

simonswiss Dec 14, 2020

sven09
Dec 9, 2020

simonswiss
Dec 14, 2020