TailwindCSS and h-[calc()]

To use the calc() function with TailwindCSS, you need to ensure that your Tailwind configuration allows arbitrary values. The syntax you used, h-[calc(100dvh - 124px)], should work if your Tailwind setup is correct. However, there are a few things to check and consider:

1. Ensure Tailwind is Configured Correctly: Make sure your TailwindCSS is set up to allow arbitrary values. This is typically supported in recent versions of TailwindCSS.

2. Check for Browser Support: The dvh unit is relatively new and stands for "dynamic viewport height." Ensure that the browsers you are targeting support this unit. If not, you might want to use vh instead.

3. Verify Your Tailwind Version: Ensure you are using a version of TailwindCSS that supports arbitrary values. This feature is available in TailwindCSS 2.2 and later.

4. Check for Conflicts: Ensure there are no conflicting styles that might be overriding your height setting.

Here's a simple example of how you might use this in your HTML:

<div class="h-[calc(100dvh-124px)] bg-blue-500">
  <!-- Your content here -->
</div>

If the above doesn't work, try using vh instead of dvh to see if that resolves the issue:

<div class="h-[calc(100vh-124px)] bg-blue-500">
  <!-- Your content here -->
</div>

If you continue to have issues, double-check your TailwindCSS setup and ensure that your build process is correctly processing the Tailwind classes.