Responsive Design with Next.js and Tailwind CSS

Provide an example of how to incorporate Tailwind CSS into a Next.js project for efficient responsive design.

import 'tailwindcss/tailwind.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

This is the _app.js file where we import the Tailwind CSS styles globally for the Next.js application.

module.exports = {
  future: {
    // Enable purgeLayersByDefault and removeDeprecatedGapUtilities when they're no longer experimental
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  purge: ['./components/**/*.js', './pages/**/*.js'], // Configure PurgeCSS to remove unused styles
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

This is an example of a Tailwind CSS configuration file (tailwind.config.js) which enables certain future features and configures PurgeCSS to remove unused styles for production builds.

import React from 'react';

export default function ResponsiveCard() {
  return (
    <div className='flex flex-col md:flex-row bg-gray-100 p-4'>
      <img className='w-full md:w-1/3' src='/path-to-image.jpg' alt='Sample Image' />
      <div className='mt-4 md:mt-0 md:ml-4'>
        <h1 className='text-xl font-bold'>Title of the card</h1>
        <p className='mt-2'>This is the content of the card. Resize your browser to see the responsive design in action.</p>
      </div>
    </div>
  );
}

In this component, we create a responsive card using Tailwind CSS classes. When the screen is medium (md) or larger, the image and the text content are shown side by side; otherwise, they are stacked vertically.