标签: tailwind-css

我想将颜色变量（默认或扩展）用于我的扩展主题，例如：

module.exports = {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            colors: {
                lime: {
                    '100': 'green'
                }
            },
            backgroundColor: {
                skin: {
                    base: 'bg-red-500',
                    secondary: 'lime-100',
                },
            },
        },
    },
    plugins: [],
};

但这不起作用。我怎样才能有一个bg-skin-base相当于 的类bg-red-500和另一个bg-skin-secondary相当于 的类bg-[green]？

我目前正在开发一个学习 React 和 Node.js 的网站。当我需要 CSS 时，我听说了 tailwind CSS，这是一个非常好的 CSS 集合。我决定在我的 React 项目中使用 Tailwind。我按照 Tailwind网站上所说的 create-react-app的步骤进行操作。

之后，当我尝试使用 h1 标签的 Hello World 项目时，文本大小太小。

这怎么发生的？这是因为顺风还是因为我的错？有哪些方法可以解决这个问题？？这是我第一次顺风。

我的代码：JS：

function App() {
  return (
   <div className="App">
    <h1 className="text-center text-green-900 font-bold "  >Hello World</h1>
  </div>
  );
 }

export default App;

索引.css：

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

tailwind.config.js：

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

正如标题所述，我试图使用 Tailwind CSS 使父 div 中的 div 跨列对齐。但是，由于上传到每列的图像大小不同，它们没有对齐。我不想调整图像大小。我用红色圈出了我想要在底部对齐的 div。Github 仓库

我尝试过此处引用的不同设置

我想要对齐的特定子 div 来自<div className="p-4 bg-black">

我想知道是否有人可以提供帮助？

return (
<div className="flex justify-end">
  <div className="px-4" style={{ maxWidth: '1600px' }}>
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
      {
        nfts.map((nft, i) => (
          <div key={i} className="border shadow rounded-xl overflow-hidden">
            <img src={nft.image} />
            <div className="p-4">
              <p style={{ height: '64px' }} className="text-2xl font-semibold">{nft.name}</p>
            <div style={{ height: '70px', overflow: 'hidden' }}>
              <p className="text-gray-400">{nft.description}</p>
              </div>
            </div>
            <div className="p-4 bg-black">
              <p className="text-2xl mb-4 font-bold text-white">{nft.price} …

我们正在进行像亚马逊这样的大项目。因此，两个分支使用 bootstrap 4。现在在主分支中我们安装 tailwind css，并且我还在 tailwind.config.js 中添加了内容路径。它工作完美...但问题现在是由 tailwind 类覆盖一些引导程序... 当我从 global.css 中删除 @tailwind 基础、组件、实用程序时，引导程序可以正常工作。但是添加这些行之后，引导程序再次不起作用，并且出现了一些顺风类。

那么，现在我该如何修复它呢？

我的 VSCODE（可能更漂亮）更改了我为 HTML 元素指定的类名称。例如，这个类名： <a className="border-green-300 rounded mr-2 border-b-2 "> 变成这样：

<a className="m-5 rounded-lg border-b-2 border-green-300"> 这很烦人，因为我有时会检查第二个屏幕以查看设置结果如何（我使用 TailwindCSS），如果我不喜欢某些内容，我会快速将其删除，但由于它已经重新排列，所以我只是删除了另一个类。是否有设置可以禁用此功能？我找不到它。

所以我正在制作这个应用程序，当我单击按钮时，我需要淡入菜单。我使用状态在单击时呈现它，但无法让它在单击时淡入/淡出。当我opacity在 Chrome 开发控制台中编辑值时，转换工作正常，但当我想使用状态更改它时，它却不起作用。

有什么帮助吗？提前致谢！

import React, { useState } from "react";
import { useRouter } from "next/router";
import { MenuIcon, XIcon } from "@heroicons/react/outline";

function Header() {
  const router = useRouter();

  const [popCard, setPopCard] = useState("hidden");
  const [fade, setFade] = useState(true);

  const handleMenuClick = () => {
    setPopCard("inline-block");
    setFade(true);
  };

  const handleXClick = () => {
    setPopCard("hidden");
    setFade(false);
  };

  return (
    <div className="text-center">
      <header className="sticky z-50 top-0  shadow-md bg-white border-b p-5">
        <div className="flex justify-between items-center">
          <h1
            className="text-6xl text-red-500 …

我正在使用twrnc包在 React Native 项目中使用 Tailwind CSS。

其语法是，

<View style={styles.container}>
  <Text style={tw.style`text-green-500 font-bold`}>Open up App.js to start working on your app!</Text>
  <StatusBar style="auto" />
</View>

但我没有从 VSCode 获得有关 Tailwind CSS 类的建议。任何人都可以建议或帮助获得课程建议吗？

CommandError：看起来 node.js 和/或 npm 未安装或找不到。

访问https://nodejs.org为您的系统下载并安装 node.js。

如果您安装了 npm 但仍然收到此错误消息，请在 settings.py 中设置 NPM_BIN_PATH 变量以匹配系统中 NPM 可执行文件的路径。

示例：NPM_BIN_PATH =“/usr/local/bin/npm”

React 中这个非常简单的切换不适用于 tailwind CSS。当我单击“切换颜色”按钮时，div 的 className 在 bg-[#222222] 和 bg-[#DDDDDD] 之间变化，但 div 实际上从未着色 - 它具有 className，但 tailwind 似乎没有能够填写背景属性。

import React, { useState } from "react";

function App() {
  const [color, setColor] = useState('222222')
  const toggleColor = () => color === '222222' ? setColor('DDDDDD') : setColor('222222');
  return (
    <div className='h-screen w-full flex flex-col justify-center items-center'>
        <button onClick={toggleColor}>Toggle Color</button>
        <div className={`bg-[#${color}] w-[100px] h-[100px]`}></div>
    </div>
  )
}

export default App;

澄清一下，如果我存储完整的字符串“bg-[#2222222]”或“bg-[#DDDDDD]”，然后将其直接放入 className 中，它就可以工作。（又名，在下面的代码段中，div 以正确的颜色呈现并正确切换：

import React, { useState } from "react";

function App() …

我想问一些关于使用顺风的伪元素的问题，所以在讨论我的主要问题之前我想使用CSS

.text-location {
  display: flex;
  gap: 1.625rem;
}

.text-location::after {
  content: url('image/arrow-down-icon.svg'); <= example image
  display: inline-block;
  width: 100%;
  height: 100%;
}

结果是这样的：

it's working and nothing something wrong when I used in CSS, but when I'm going through using tailwind the content is not showing anything, any wrong with my code? Or I must do something different what I have been made? I hope anyone can help and tell me where I made the mistake...Thank you before …