Tailwind + Next.js Last-child 关于不工作答案

【问题标题】：Tailwind + Next.js Last-child on not workingTailwind + Next.js Last-child 关于不工作
【发布时间】：2021-11-25 07:37:35
【问题描述】：

我启动并重新启动了 Next.js，但仍然无法正常工作。我正在尝试使用mx-2、ml-2 等边距类。

last-child 的文档链接 https://tailwindcss.com/docs/hover-focus-and-other-states

添加 last: 前缀以仅在实用程序是最后一个子项时应用它它的父母。这在生成元素时最有用在某种循环中。

请务必注意，您应该将任何 last: 实用程序添加到子元素，而不是父元素。

如果我在循环中生成这些，不应该将 last: 类实际添加到父类，因为我不知道哪个会是最后一个

    "postcss": "^8.3.8",
    "tailwindcss": "^2.2.16"

tailwind.config.css

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      margin: ['last'],
      marginLeft: ['last'],
      marginRight: ['last'],
    },
  },
  plugins: [],
};

我在一些反应组件中的 JSX

我的意思是这行得通，但如果我在孩子身上这样做ml-10 无论如何都可以在没有last: 的情况下工作

<div className='flex flex-wrap py-3'>
   <div className='rounded-sm h-10 w-10 bg-gray-300'></div>
   <div className='rounded-sm h-10 w-10 bg-gray-300 last:ml-10'></div>
</div>

我不应该添加父母吗？这只是将父级向左移动 10。

<div className='flex flex-wrap py-3 last:ml-10'>
   <div className='rounded-sm h-10 w-10 bg-gray-300'></div>
   <div className='rounded-sm h-10 w-10 bg-gray-300'></div>
</div>

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

与npm run dev一起运行

【问题讨论】：

标签： css-selectors next.js tailwind-css

【解决方案1】：

原来我把事情复杂化了。只需使用顺风间隙类，所以第一个孩子没有左边距，最后一个孩子没有右边距

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。