我如何让 Tailwind.css 响应？

Question

我有两个 components.In 第一个 MovieItem.js 我创建了一个 card.In 第二个 Movies.js 我正在遍历一组卡片并将它们显示在 UI - 每个 row.I 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;

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;

我还在 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。

我如何让 Tailwind.css 响应？

How do i make Tailwind.css responsive?

css

reactjs

tailwind-css