标签: tailwind-css

我正在使用顺风CSS。卡片中的数据不一致。例如，有些卡的描述很短，而另一些卡的描述很长。有些卡片包含 1-2 个标签，而其他卡片则包含 5-6 个。我想让所有的卡片都具有相同的高度。有什么办法可以做到这一点吗？

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-6">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full sm:w-1/2 md:w-1/2 xl:w-1/4 p-4">
      <div class="block bg-white overflow-hidden border-2">
        <div class="p-4">
          <h2 class="mt-2 mb-2 font-bold text-2xl font-Headingg">
            Card Name
          </h2>
          <div class="mb-4 flex flex-wrap">
            <span class="mr-2">Link 1</span>
            <span>Link 2</span>
          </div>

          <p class="text-md text-justify">Some Description</p>
        </div>
        <div class="p-4 flex flex-wrap items-center">
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #1</p>
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #2</p>
        </div>
      </div>
    </div>
  </div>
</div>

我有一个简单的弹性 div 有很多孩子。我想要使​​用 tailwindcss 每行 3 个元素。

有没有办法仅使用 tailwindcss 类来完成此任务？我尝试在父级 div 上使用间隙-4，并在子元素上使用 w-1/3，但它为子元素添加了边距，从而破坏了第二个元素之后的行：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-wrap gap-4  mb-6">
        <div class="w-1/3 shadow border rounded p-4">
            My element
        </div>
        <div class="w-1/3 shadow border rounded p-4">
            My element
        </div>
        <div class="w-1/3 shadow border rounded p-4">
            My element
        </div>
        <div class="w-1/3 shadow border rounded p-4">
            My element
        </div>
    </div>

如何在子元素之间添加间隙，仅在每三个元素之后断行（简而言之：我想要一个 3 列 div）？

Headless UI 提供了一个下拉菜单示例，当您单击按钮时，下拉菜单将在下面打开。

其代码在这里：

import { Menu, Transition } from '@headlessui/react'
import { Fragment, useEffect, useRef, useState } from 'react'
import { ChevronDownIcon } from '@heroicons/react/solid'

export default function Example() {
  return (
    <div className="w-56 text-right fixed top-16">
      <Menu as="div" className="relative inline-block text-left">
        <div>
          <Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
            Options
            <ChevronDownIcon
              className="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100"
              aria-hidden="true"
            />
          </Menu.Button>
        </div>
        <Transition
          as={Fragment}
          enter="transition ease-out duration-100"
          enterFrom="transform opacity-0 …

我将 Tailwind v2 更新到 v3。还使用我很新的盖茨比。当顺风 v2 时我没有这两个警告。但我在 v3 中得到了这个。我在 webpack.config.js 中看到了某种解决方案，例如更新最新的自动前缀程序，但在 gatsby 中却没有。所以我不确定如何解决它。如果您能给我一些建议，我将不胜感激。谢谢。

<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'mini-css-extract-plugin /Users/node_modules/css-loader/dist/cjs.js??
ruleSet[1].rules[9].oneOf[1].use[1]!/Users//node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[2]!/Users/src/styles.css|0|
Compilation/modules|/Users/node_modules/css-loader/dist/cjs.js??
ruleSet[1].rules[9].oneOf[1].use[1]!/Users/node_modules/postcss-loader/dist/cjs.js??
ruleSet[1].rules[9].oneOf[1].use[2]!/Users/src/styles.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems ->
 webpack/lib/NormalModule -> Array { 1 items } ->

• 我用什么

"gatsby": "^3.13.0",
"gatsby-plugin-gatsby-cloud": "^3.2.0",
"tailwindcss": "^3.0.23"
"autoprefixer": "^10.4.4",
"postcss": "^8.4.12",

我正在尝试将图标放在输入中的左侧。tailwindcss 有一个用于 ReactJS 的库，其中包含 SVG 和组件作为图标：https: //heroicons.com/。

我的组件：

import React from 'react'
import { MailIcon } from '@heroicons/react/solid'

const BlogPost = () => (
  <section className="container-full flex flex-col m-20">
    <h2 className="mx-auto uppercase font-bold">Check my blogpost</h2>
    <form action="POST" className="mx-auto mt-5 w-6/12">
      <label htmlFor="email">
         <MailIcon className="w-8 h-8" />
        <input className="form-input w-full" type="email" name="email" id="email" placeholder="email@kemuscorp.com" />
      </label>
    </form>
  </section>
)

export default BlogPost

如您所见，MailIcon 组件可以接收 tailwindcss。有想法将图标嵌入输入中吗？

我正在将 next.js 与 tailwind css 一起使用，并且我在项目中需要一些现成的组件，这样我就可以节省时间，因为我使用了 Material-ui。我的应用程序工作正常，但我收到一条警告消息。如果“是”（意味着如果两者的组合不会影响项目的性能或将来的任何其他问题），是否可以在同一个项目中使用这两种技术（material-ui 和 tailwind css）？删除下面显示的警告消息