小编Ed *_*cas的帖子

我试图通过tailwind.config.js扩展编写一些主题来在我的项目中使用 Tailwind 自定义颜色。

module.exports = {\n  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n  theme: {\n    extend: {\n      colors: {\n        s2condPurple: '#a32eff',     // works \xe2\xad\x95\xef\xb8\x8f\n        s2condPink: '#ff0099',       // works \xe2\xad\x95\xef\xb8\x8f\n        s2condOrange: '#ff5f55',     // works \xe2\xad\x95\xef\xb8\x8f\n        s2condYellow: '#ffe600',     // doesn't work \xe2\x9d\x8c\n        s2condLime: '#cdff64',       // works \xe2\xad\x95\xef\xb8\x8f\n        s2condMint: '#2af1b5',       // works at 'text-s2condMint' but not at 'border-s2condMint'\n        secondTest: '#ffe600',       // works \xe2\xad\x95\xef\xb8\x8f <-- I tested it for s2condYellow but it works perfectly!\n        s2condTest2: '#2af1b5',      // doesn't work \xe2\x9d\x8c\n        ...\n      },\n      \n    },\n  },\n …

假设我希望白卡内的所有链接都是黑色的，橙色卡内的所有链接都是白色的。我可以用纯 CSS 轻松做到：

.card--primary {
  background-color: white;

  a {
    color: black
  }
}

.card--danger {
  background-color: orange;
  
  a {
    color: white;
  }
}

但是如何使用 Tailwind（或其他 CSS 实用框架）实现类似的行为？

我有一个简单的 React 组件，最初有一个 Tailwind CSS 类，hidden该类应用 CSSdisplay: none并将该类更改为visible单击按钮。当我用expect().not.toBeVisible()它进行测试时，它告诉我该元素在具有类时已经可见hidden。

如果我不使用 Tailwind CSS 并使用法线，style={{display: 'none'}}它将正确识别该元素不可见。这显然意味着问题出在 Tailwind CSS 上。

这是我的测试：

test("Notification bar should be initially hidden but visible on click", async () => {
    render(<Notifications />);

    expect(await screen.findByTestId("list")).not.toBeVisible();
    // this test fails while the element already has a Tailwind CSS class of "hidden"
});

虽然这是我的组件：

<ul className="hidden" data-testid="list">
  <li>item 1</li>
</ul>

这就是我的问题的样子（见环）：

看图

使用Chrome的检查器发现它与--tw-ring-shadow. 所以我尝试添加类似ring-0和 的类ring-offset-0（如下所示），但它不起作用！

    import { TextField } from "@mui/material";
    
    
    function ContactForm(): JSX.Element {
      return (
        <div className="form-container pt-12 flex flex-col items-center">
          <div className="input-row">
            <TextField
              className="ring-offset-0 ring-0"
              label="First Name"
              variant="outlined"
            />
          </div>
        </div>
      );
    }
    
    export default ContactForm;

您知道如何摆脱与输入字段重叠的恼人边框吗？

我将不胜感激你的帮助！

我使用 Vite 创建了一个 React 应用程序，并使用此处提供的文档来安装 Tailwind：Tailwind CSS 安装指南。

然而，它并没有采用任何 Tailwind 风格。

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

索引.css

@tailwind base;
@tailwind components;
@tailwind utilities;

主.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./router";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

我安装的唯一依赖项是react-router-dom.

我怎样才能解决这个问题？

我在 React 中使用 Tailwind CSS，并尝试为我的图像 div 设置 500px 的宽度。但div的宽度增加不会超过300px。

<div className="flex flex-row gap-4 mb-12">

    <div className='images px-6 basis-0'>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

    </div>

    <div className='product_info basis-0'>
        ...
    </div>

</div>

当我将自定义类中的宽度从 300px 更改为 500px 时，框就消失了：

如果我使用 CSS 手动调整宽度和高度，效果很好。

.img{
  width: 500px;
  height: 300px;
}

我不明白是什么导致了这个问题:(

我有以下元素：

<td class="min-w-[10rem] max-w-[10rem] overflow-ellipsis text-sm text-text-light px-3 min-w-0"></td>

它的所有类名都是通过组件自动生成的，除了最后一个min-w-0.

由于min-w-0是列出的最后一个类名，我希望它会覆盖min-w-[10rem]列出的第一个类名。

然而，由于某种原因，min-w-[10rem]似乎优先。

来自 Chrome 开发工具：

关于原因以及如何解决它有什么见解吗？

谢谢！

我正在制作一个身份验证系统，在后端将我重定向到前端页面后，我正在为 userData 发出 API 请求，并将该数据保存到 localStorage。然后我试图加载 Spinner 或 UserInfo。

我正在尝试使用 useEffect 侦听 localStorage 值，但登录后我得到“未定义”。当 localStorage 值更新时 useEffect 不会再次运行并且 Spinner 永远保持旋转。

我试图做：JSON.parse(localStorage.getItem('userData'))，但后来我得到了一个 useEffect 无限循环。

只有当我刷新页面时，我的 localStorage 值才会出现，我可以显示它而不是 Spinner。

我做错了什么？

也许有更好的方法在准备好时加载 userData？

我正在尝试以正确的方式更新 DOM？

感谢您的回答;)

import React, { useState, useEffect } from 'react';
import { Spinner } from '../../atoms';
import { Navbar } from '../../organisms/';
import { getUserData } from '../../../helpers/functions';

const Main = () => {
  const [userData, setUserData] = useState();
  useEffect(() => {
    setUserData(localStorage.getItem('userData'));
  }, [localStorage.getItem('userData')]);

  return <>{userData …

我正在使用使用纱线工作区的 monorepo 架构，其中 Tailwind CSS 是项目的根。在其中一个工作区中，我正在使用 React，并且我已将 Tailwind 实用程序添加到其样式中。Tailwind 在项目中运行良好

1. 每当我定义新颜色时它就不起作用。
2. 此外，我还想实现 darkMode，tailwind.config.js我在其中添加darkMode: 'class'并制作了一个上下文包装器来将 class='dark' 设置为 html 根，但在更改主题时<html class='dark'设置但dark:bg-black不起作用。

我的文件夹结构

Project
 |    
 +-- packages
 |  |  
 |  \-- react-project-1
 |  |   |
 |  |   +--app.js
 |  |   +--app.css
 |  |  
 |  \-- react-project-2
 |    
 +-- tailwind.config.js

我的 tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    './packages/react-project-1/src/**/*.{js,ts,jsx,tsx}',
    './packages/react-project-2/src/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class', 
  theme: {
    colors: {
      orange: '#E05507',
    },
    extend: {},
  },
  variants: { …

我正在创建一个可重用的组件按钮，我想将两个 Tailwind 类作为道具传递给该按钮并动态使用它们。

这是我的组件：

function Button({ primary, secondry, label, onClick }) {
  return (
    <button
      onClick={(e) => onClick(e)}
      className={`bg-${primary} py-0.5 px-3 rounded text-white font-semibold text-xl border-2 border-${primary} hover:bg-${secondry} hover:text-${primary} cursor-pointer duration-300`}
    >
      {label}
    </button>
  );
}

这就是我使用该组件的方式：

<Button
label={"Cancel"}
primary="red-700"
secondry="zinc-900"
onClick={(e) => navigate("/customers")}
/>

然而，这些课程并未被应用。它看起来是这样的：