Question

以下是 taiwind css 网格在 HTML 中正常工作的示例： https://play.tailwindcss.com/mU6PzU0sqX

尽管如此，这里是react中的同一个例子，似乎没有通过： https://codesandbox.io/s/react-typescript-tailwind-playground-forked-m77pw?file=/src/App.tsx 在浏览器中查看不工作的组件：https://m77pw.csb.app/

这是反应代码：

<div className="App">
      <h1 className="text-red-500">Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="grid grid-cols-3 gap-4">
            <div className="border col-span-1">
              1
            </div>
            <div className="border col-span-1">
              2
            </div>
      </div>
</div>

Answer 1

我不确定是什么导致了您的情况出现问题，但我能够使其正常工作。我在 CodeSandbox 上使用了 Tailwind template for React。您可以使用 this 指南在本地计算机上实现相同的目标。

这是一个有效的 CodeSandbox link。

Answer 2

您的 tailwind.css 文件似乎不包含网格实用程序，这解释了为什么样式不起作用。

与其将 Tailwind 样式复制/粘贴到 CSS 文件中，不如将 Tailwind 安装到您的项目中。安装 Tailwind 将生成仅包含您需要的实用程序的自定义 CSS 文件，避免将大量 CSS 文件发送给用户并确保您使用的所有实用程序都可用。

Tailwind 文档包含有关 installing Tailwind 的详细信息，以及有关 Create React App 的特定教程。

如果您确定不想安装 Tailwind 并希望使用 CSS 文件，请参阅 Tailwind 文档 installing via CDN。这将确保所有默认实用程序和变体都已启用。

Tailwind css Grid 在 Reactjs 中不起作用？

2 个答案: