tailwind css global responsive

tailwind-responsive-config.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* === Global Body Styling === */
body {
  @apply bg-white text-[#182230] leading-relaxed;
}

/* === Container === */
.container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* === Flexbox Utilities === */
.flex-center {
  @apply flex justify-center items-center;
}

.flex-between {
  @apply flex justify-between items-center;
}

.flex-col-center {
  @apply flex flex-col justify-center items-center;
}

/* === Grid Layouts === */
.grid-layout {
  @apply grid gap-4;
}

@screen sm {
  .grid-layout {
    @apply grid-cols-2;
  }
}

@screen md {
  .grid-layout {
    @apply grid-cols-3;
  }
}

@screen lg {
  .grid-layout {
    @apply grid-cols-4;
  }
}

/* === Responsive Typography === */
h1 {
  @apply text-2xl sm:text-3xl md:text-4xl font-bold;
}

h2 {
  @apply text-xl sm:text-2xl md:text-3xl font-semibold;
}

h3 {
  @apply text-lg sm:text-xl md:text-2xl font-medium;
}

p {
  @apply text-base sm:text-lg md:text-xl;
}

/* === Buttons === */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all duration-300;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
  @apply bg-gray-600 text-white hover:bg-gray-700;
}

.btn-outline {
  @apply border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white;
}

/* === Forms === */
input,
textarea,
select {
  @apply w-full px-4 py-2 border rounded-md outline-none focus:ring focus:ring-blue-300;
}

input[type="checkbox"],
input[type="radio"] {
  @apply w-5 h-5 text-blue-600;
}

/* === Responsive Cards === */
.card {
  @apply p-6 bg-white shadow-lg rounded-lg;
}

@screen sm {
  .card {
    @apply p-8;
  }
}

@screen lg {
  .card {
    @apply p-10;
  }
}

/* === Navigation === */
.navbar {
  @apply bg-white shadow-md fixed w-full top-0 left-0 z-50;
}

.nav-link {
  @apply text-gray-700 hover:text-blue-600 transition-all;
}

@screen md {
  .nav-link {
    @apply text-lg;
  }
}

/* === Footer === */
.footer {
  @apply bg-gray-800 text-white py-6 text-center;
}

/* === Responsive Spacing === */
.padding {
  @apply p-4 sm:p-6 md:p-8 lg:p-10;
}

.margin {
  @apply m-4 sm:m-6 md:m-8 lg:m-10;
}

.dark .btn-primary {
  @apply bg-blue-400 text-gray-900 hover:bg-blue-500;
}

/* === Animations === */
.fade-in {
  @apply opacity-0 transition-opacity duration-700;
}

@screen sm {
  .fade-in {
    @apply opacity-100;
  }
}






config tailwind


/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    extend: {
      colors: {
        primary: '#4F46E5',
        secondary: '#10B981',
        accent: '#F59E0B',
        background: '#F3F4F6',
        text: '#1F2937'
      },
      fontFamily: {
         sans: ['Geist', 'system-ui', 'sans-serif'],
        mono: ['Geist Mono', 'monospace'], 
      }
    }
  },
  plugins: [
    require('@tailwindcss/container-queries'),
    require('@tailwindcss/typography'),
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '100%',
          '@screen lg': {
            maxWidth: '1024px',
          },
          '@screen xl': {
            maxWidth: '1280px',
          },
          '@screen 2xl': {
            maxWidth: '1536px',
          },
        },
        '.desktop-padding': {
          paddingLeft: '5vw',
          paddingRight: '5vw',
          '@screen 2xl': {
            paddingLeft: '8vw',
            paddingRight: '8vw',
          },
        },
      });
    },
  ],
}