How do i make Tailwind.css responsive?

Question

I have two components.In first MovieItem.js i created a card.In second Movies.js i am looping through an array of cards and displaying them in UI - 4 per row.I am using Tailwind grid template columns to do this, and it s working fine.

 return (
    <div className="grid grid-cols-4 gap-4">
      {movies.map((movie) => (
        <MovieItem key={movie.id} movie={movie}></MovieItem>
      ))}
    </div>
  );

However if the width of the screen is less then 640 pixels i want to show only one card per row which means that each card should have width 100% and that they should be all horizontally stacked on top of each other, but i am not getting any results with this.

return (
    <div className="grid grid-cols-4 sm:grid grid-cols-1 gap-4">
      {movies.map((movie) => (
        <MovieItem key={movie.id} movie={movie}></MovieItem>
      ))}
    </div>
  );

MovieItem.js

import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import AlternativeImage from "./AlternativeImage";

const MovieItem = ({ movie: { id, title, poster_path } }) => {
  return (
    <div className=" bg-gray-900 px-4 pt-4 pb-5 overflow-hidden rounded ">
      {poster_path ? (
        <img
          src={"https://image.tmdb.org/t/p/w400/" + poster_path}
          alt=""
          className="w-full block content-center p-4 content-image"
        />
      ) : (
        <AlternativeImage></AlternativeImage>
      )}
      <h6 className="text-base text-center text-white my-3 font-mono">
        {title}
      </h6>
      <div className="button-container">
        <Link
          to={`/movie/${id}`}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded "
        >
          Movie Details
        </Link>
      </div>
    </div>
  );
};

export default MovieItem;

Movies.js

import React, { useContext } from "react";
import MovieItem from "./MovieItem";

import MovieContext from "../context/movie/movieContext";

const Movies = () => {
  const movieContext = useContext(MovieContext);
  const { movies } = movieContext;

  return (
    <div className="grid grid-cols-4 sm:grid grid-cols-1 gap-4">
      {movies.map((movie) => (
        <MovieItem key={movie.id} movie={movie}></MovieItem>
      ))}
    </div>
  );
};

export default Movies;

I also made necessary changes in Tailwind config file:

const tailwindcss = require("tailwindcss");
module.exports = {
  theme: {
    screens: {
      xl: { max: "1279px" },
      // => @media (max-width: 1279px) { ... }

      lg: { max: "1023px" },
      // => @media (max-width: 1023px) { ... }

      md: { max: "767px" },
      // => @media (max-width: 767px) { ... }

      sm: { max: "639px" },
      // => @media (max-width: 639px) { ... }
    },
  },
  plugins: [tailwindcss("./tailwind.js"), require("autoprefixer")],
};

Answer 1

By default, Tailwind uses a mobile first breakpoint system, similar to what you might be used to in Bootstrap or Foundation.

What this means is that unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above.

In your case, simply do this

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4

Check docs .