Advanced Tailwind CSS Responsive Utilities

Modern responsive design utilities using Tailwind CSS. These utilities help create complex responsive layouts with minimal code.

Configuration

tailwind.config.ts

import type { Config } from 'tailwindcss';
 
const config: Config = {
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
      },
      container: {
        center: true,
        padding: {
          DEFAULT: '1rem',
          sm: '2rem',
          lg: '4rem',
          xl: '5rem',
          '2xl': '6rem',
        },
      },
    },
  },
  plugins: [
    function ({ addUtilities }: any) {
      const newUtilities = {
        '.responsive-grid': {
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))',
          gap: '1rem',
        },
        '.responsive-flex': {
          display: 'flex',
          flexWrap: 'wrap',
          gap: '1rem',
          '& > *': {
            flex: '1 1 300px',
          },
        },
        '.aspect-video': {
          aspectRatio: '16 / 9',
        },
        '.aspect-square': {
          aspectRatio: '1 / 1',
        },
      };
      addUtilities(newUtilities);
    },
  ],
};
 
export default config;

Grid Layout Examples

Basic Grid

BasicGrid.html

<div class="responsive-grid">
  <div class="p-4 bg-gray-100">Item 1</div>
  <div class="p-4 bg-gray-100">Item 2</div>
  <div class="p-4 bg-gray-100">Item 3</div>
</div>

Grid with Custom Min Width

CustomMinWidth.html

<div class="responsive-grid" style="--min-width: 400px">
  <div class="p-4 bg-gray-100">Item 1</div>
  <div class="p-4 bg-gray-100">Item 2</div>
  <div class="p-4 bg-gray-100">Item 3</div>
</div>

Flex Layout Examples

Basic Flex

BasicFlex.html

<div class="responsive-flex">
  <div class="p-4 bg-gray-100">Flex Item 1</div>
  <div class="p-4 bg-gray-100">Flex Item 2</div>
  <div class="p-4 bg-gray-100">Flex Item 3</div>
</div>

Flex with Custom Basis

CustomBasis.html

<div class="responsive-flex" style="--flex-basis: 250px">
  <div class="p-4 bg-gray-100">Flex Item 1</div>
  <div class="p-4 bg-gray-100">Flex Item 2</div>
  <div class="p-4 bg-gray-100">Flex Item 3</div>
</div>

Aspect Ratio Examples

Video Aspect Ratio

VideoAspect.html

<div class="aspect-video bg-gray-100">
  <!-- 16:9 content -->
</div>

Square Aspect Ratio

SquareAspect.html

<div class="aspect-square bg-gray-100">
  <!-- 1:1 content -->
</div>

Container Examples

Default Container

DefaultContainer.html

<div class="container">
  <!-- Content -->
</div>

Responsive Container

ResponsiveContainer.html

<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Content -->
</div>

Imports

imports.ts

import type { Config } from 'tailwindcss';

Features:

Custom breakpoint for ultra-wide screens
Responsive container padding
Auto-fit grid with minimum item width
Flexible flex layout with minimum item width
Aspect ratio utilities
Clean, maintainable configuration
Customizable through CSS variables
Responsive design patterns