Как сделать Tailwind. css отзывчивым?

Question

У меня есть два компонента. В первом MovieItem. js я создал карточку. Во втором Movies. js я просматриваю массив карточек и отображаю их в пользовательском интерфейсе - по 4 на строку. Я использую сетку Tailwind. столбцы шаблона для этого, и он работает нормально.

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

Однако, если ширина экрана меньше 640 пикселей, я хочу отображать только одну карту в строке, что означает, что каждая карта должна иметь ширину 100% и что все они должны быть расположены горизонтально друг над другом, но я не получаю с этим никаких результатов.

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;

Фильмы . 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;

Я также внес необходимые изменения в конфигурационный файл Tailwind:

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

По умолчанию Tailwind использует систему мобильной первой точки останова, аналогичную той, что вы могли использовать в Bootstrap или Foundation.

Это означает, что служебные программы без префиксов (например, прописные буквы) действуют на всех размеры экрана, а утилиты с префиксом (например, md: uppercase) действуют только при указанной точке останова и выше.

В вашем случае просто сделайте это

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

Проверьте docs .