J—P

Tailwind CSS 4 brings a major shift in how configurations are handled, moving away from JavaScript-based configuration files and embracing a more native approach inside CSS itself. I can achieve the same responsive CSS grid layout, as I doing here with a Svelte compoennt, but now with just Tailwind only.

Initial Attempt

My initial idea was to create several utilities for different sizes. While I wasn't completely satisfied with the lack of flexibility, the predefined options work well enough.

CSS

@import "tailwindcss";

@theme {
  --grid-template-columns-fill-sm: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  --grid-template-columns-fill-md: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  --grid-template-columns-fill-lg: repeat(auto-fill, minmax(min(32rem, 100%), 1fr));
  --grid-template-columns-fill-xl: repeat(auto-fill, minmax(min(48rem, 100%), 1fr));
}

HTML

<div class="grid grid-cols-fill-md gap-4">
  <article>Item 1</article>
  <article>Item 2</article>
  <article>Item 3</article>
</div>

Dynamic Approach

Latest Tailwind 4.0.0-beta.9 introduces the ability to create functional utilities. This method greatly enhances flexibility, enabling you to create a truly versatile design system.

CSS

@import "tailwindcss";

@utility grid-cols-fill-* {
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(calc(var(--spacing) * --value(integer)), 100%), 1fr)
  );
}

HTML

<div class="grid grid-cols-fill-64 gap-4">
  <article>Item 1</article>
  <article>Item 2</article>
  <article>Item 3</article>
</div>