如何使 Tailwind.css 響應？

Question

我有兩個組件。在第一個 MovieItem.js 中，我創建了一張卡片。在第二個 Movies.js 中，我循環遍歷一組卡片並在 UI 中顯示它們 - 每行 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>
  );

電影項目.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

檢查文檔。