Dynamic value on tailwind

Tailwind CSS doesn't support dynamic values in the class names out of the box because it generates CSS classes at build time. However, you can work around this limitation by using inline styles or by injecting styles with JavaScript.

Here's a solution using inline styles with Alpine.js, which is a minimal framework often used with Tailwind CSS for reactivity:

First, make sure you have Alpine.js included in your project. Then, you can use the x-bind directive to bind the inline style to your dynamic value:

<div x-data="{ dynamicValue: {{ $dynamic_value }} }" 
     :style="'grid-template-columns: repeat(' + dynamicValue + ', minmax(500px, 1fr))'"
     class="lg:grid">
  <!-- Your grid items here -->
</div>

In this example, x-data initializes a data object with your dynamic value, and x-bind binds the inline style attribute to a template literal that includes your dynamic value.

If you're not using Alpine.js or a similar reactive framework, you can achieve the same result with vanilla JavaScript:

<div id="dynamicGrid" class="lg:grid">
  <!-- Your grid items here -->
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var dynamicValue = {{ $dynamic_value }};
    var gridElement = document.getElementById('dynamicGrid');
    gridElement.style.gridTemplateColumns = `repeat(${dynamicValue}, minmax(500px, 1fr))`;
  });
</script>

In this vanilla JavaScript approach, you wait for the DOM to be fully loaded, then you set the gridTemplateColumns style property on the element with the dynamicGrid ID to include your dynamic value.

Remember to replace {{ $dynamic_value }} with the actual syntax for embedding dynamic data in your templating language if you're not using Blade templates with Laravel.