标签: tailwind-css

我正在尝试在 Next.js 项目中使用 Tailwind CSS，但我无法将 Tailwind 类与 Next.js Image 组件一起使用。

这是我的代码：

<Image
    src={img.img}
    alt="Picture of the author"
    width="200"
    height="200"
    className="bg-mint text-mint fill-current"
></Image>

我想使用 Tailwind 类而不是Next.js 图像的heightandwidth属性。但我不能，因为它给我一个错误。此外，unsizedproperty 会引发另一个错误，指出它已被弃用。有什么解决办法吗？

如果我不使用heightandwidth属性，这里是错误。

当我使用该layout='fill'属性时，它只显示一张图片。如果我使用该unsized属性，则会显示以下错误。

我正在对 typescript 和 tailwindcss 做出反应。

我想要的是，不是在主tailwind.css文件（包含 @tailwind base、@tailwind 组件等的文件）中使用@apply指令，我想在任何 .scss 文件中使用它。

例如，每当我创建一个组件时，我都会创建一个文件夹，并在其中创建一个 index.tsx 文件和一个 .scss 文件。我想在该 .scss 文件中使用 @apply 指令。这样，工作和调试将很容易，因为两个关联的文件都在同一个文件夹中。我怎样才能做到这一点？

我在下面展示了我的基本文件夹结构。

文件夹结构：

src > 组件 > 标题 > Header.tsx

import React from "react";
import styles from "./Header.module.scss";

interface Props {}

const Header: React.FC<Props> = (props) => {
  return <div className={styles.headerTag}>Header part here</div>;
};

export default Header;

src > 组件 > Header > Header.module.scss

// what to import so that I can use tailwind like …

我试图创建一个Fixed Navigation Bar在Tailwind CSS和粘涡管页面，但无论我怎么努力，我不能让它工作...

这是我取得的成绩：

这是我的代码：

<!-- NavBar -->
<header class="fixed bg-blue-600 shadow-md  z-50 w-full px-5 py-2 flex justify-between items-center">
    <router-link to="/" class="text-2xl text-white">My App</router-link>
    <div>
        <router-link to="/login" class="text-white hover:bg-gray-700 px-3 rounded py-1">Login</router-link>
        <router-link to="/register" class="text-white hover:bg-gray-700 px-3 rounded py-1">Register</router-link>
    </div>
</header>
<div class="flex">
    <!-- Sidebar -->
    <aside class="fixed bg-white h-screen py-5 shadow">
        <div class="flex flex-col text-left">
            <router-link to="/" class="hover:bg-gray-400 px-12 py-2 rounded">
                <i class="fa fa-dashboard"></i>
                <span class="">Dashboard</span>    
            </router-link>
        </div>
    </aside>
    <!-- Main Page -->
    <main …

目前我在我的风格标签中这样做

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
  font-family: 'Roboto', sans-serif;
}

但我下载了 Roboto 字体，想知道如何配置 Tailwind 以对所有元素全局使用这些文件和字体。

边注：

我正在使用 Vuejs 并按照有关如何从此处为 Vue 设置 Tailwind 的指南进行操作

https://www.youtube.com/watch?v=xJcvpuELcZo

如何让第二个内部 div 位于第一个内部 div（地图）之上？尽管使用相对和绝对定位，我还是无法弄清楚这一点。我正在使用 React 和 Tailwind CSS。相反，第二个内部 div 当前遵循图像流并位于第一个子 div 下方。

<div className="relative w-full h-screen">
  <div className="bg-green-400 w-full h-full z-0">
    <p className="italic text-bold bd-red-100 font-serif">Map</p>
  </div>
  <div className="absolute z-50">
    <p className="text-2xl font-bold">This should be on top of the map</p>
      </div>
    </div>

我正在使用顺风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）？

这个问题已经存在一周了，一直无法找到解决方案，但我想出了一些方法来缩小问题范围。我尝试在 Next.js 应用程序中运行纱线构建，但它失败并出现错误，我将在下面发布该错误。

该程序应用程序编译良好，yarn dev并且所有样式都可以工作。我使用了 TW 文档中的标准设置。

错误的样式名称会导致构建错误吗？例如className="BadStyleName h-10 w-10"

错误：

info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at makeWebpackError (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:47168:9)
    at C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:31056:12
    at eval (eval at create (C:\Users\project\node_modules\next\dist\compiled\webpack\bundle5.js:141512:10), <anonymous>:34:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
CssSyntaxError: C:\Users\project\static\css\b0067dc6dc66c8dc.css:2251:12: Unknown word
    at Input.error (C:\Users\project\node_modules\next\node_modules\postcss\lib\input.js:123:16)
    at ScssParser.unknownWord (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:518:22)
    at ScssParser.other (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:149:12)
    at ScssParser.parse (C:\Users\project\node_modules\next\node_modules\postcss\lib\parser.js:59:16)
    at scssParse (C:\Users\project\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:335)
    at new LazyResult (C:\Users\project\node_modules\next\node_modules\postcss\lib\lazy-result.js:122:16)
    at Processor.process (C:\Users\project\node_modules\next\node_modules\postcss\lib\processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:43:12)
    at C:\Users\project\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:77:55
    at processTicksAndRejections …

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",