与 Tailwind 和 React 保持一致答案

【问题标题】：Alignment with Tailwind and React与 Tailwind 和 React 保持一致
【发布时间】：2022-02-06 01:38:35
【问题描述】：

我正在尝试让两个不同的可视化效果正确地并排放置。

这是当前的样式...

          <div className="flex flex-col md:flex-row" >
            <div className="w-full md:w-2/3">
              <div className="text-center mt-4 flex justify-center items-center">
                <h1 className="text-blue-500 text-lg font-semibold mr-5">
                  {format(new Date(selectedDate), 'do, MMMM - yyyy')}{' '}
                </h1>
                {isLoading && <Loader />}
              </div>
              <div>
                <div className = "grid-cols-2 grid-flow-col" >
                  <div className = "grid-cols-1">
                    <h3 className="capitalize">Moodmap Daily Index</h3>
    
                      <Overview data={lineGraphData} timing={settingsData} />
                  </div>
                  <div>
                    <Expressions data={expressionsData} />
                  </div>
                </div>
              </div>
              <div style={{ height: 100, width: 1000 }}>
                <SubstanceDetails
                  fetchSubstances={fetchSubstances}
                  loading={loading}
                  data={data}
                />
              </div>
            </div>
          </div>

由于某种原因，当它渲染时，虽然我做了很多更改，但它是这样的，

我希望它们水平放置，底部图位于右侧，理想情况下折线图要大得多，占 2/3。不确定为什么这个错误不断发生。

【问题讨论】：

标签： reactjs css-grid tailwind-css

【解决方案1】：

您需要通过在指定网格列的元素中包含grid className 来创建网格容器：

<div className = "grid-cols-2 grid-flow-col" >

应该变成：

<div className = "grid grid-cols-2 grid-flow-col" >

https://tailwindcss.com/docs/display#grid

注意，要对此进行调试，您可以使用检查器查看输出中没有网格容器。

【讨论】：