标签: tailwind-css

我有个问题。我正在学习 laravel 8 和 tailwind CSS。和标题 vscode tailwind CSS Intellisense 不工作。我的顺风CSS版本是2.2.15。tailwind.config.js 就像照片一样。 在此处输入图像描述 输出无错误 在此处输入图像描述

那么对于这个问题我能做什么呢？

我读过Tailwind CSS：优化生产。到目前为止我所了解的

Tailwind CSS 从您的生产版本中删除未使用的 CSS，以实现最佳性能

我的问题是外部 CSS 文件怎么样？这些自定义 CSS 类会在生产中被删除吗？

这是我第一次使用节点，我建立了一个项目并使用了命令：

npx tailwindcss -i styles.css -o ./tailwind/output.css --watch

启动 tailwindcss 类的构建过程，但这会阻止 VS Code 实时服务器扩展刷新网页，它应该在每次保存 html 文件时刷新，但现在我必须手动进入浏览器并刷新它，这违背了它的目的。只有在终端中输入CTRL + C (^C) 后，它才起作用，但在这种情况下，tailwindcss 重建会停止。以前有人遇到过这个问题还是这是一个初学者的错误？

我正在探索 Tailwind，当我需要从左到右悬停时显示下划线时，我陷入了困境。

在普通 CSS 中，它会是这样的：

    .un {
      display: inline-block;
      padding-bottom:2px;
      background-image: linear-gradient(#000, #000);
      background-position: 0 100%; /*OR bottom left*/
      background-size: 0% 2px;
      background-repeat: no-repeat;
      transition:
        background-size 0.3s,
        background-position 0s 0.3s; /*change after the size immediately*/
    }
    
    .un:hover {
      background-position: 100% 100%; /*OR bottom right*/
      background-size: 100% 2px;
    }

<span class="un">Underlined Text</span>

但我不确定如何在 Tailwind 中应用这种转换。

我正在将 nextjs 与 tailwindcss 结合使用，并且在将 postcss-nesting 添加到我的 nextjs 应用程序中时遇到困难。

以下是相同的配置：

next.config.js

const withPlugins = require("next-compose-plugins");
module.exports = withPlugins([], {});

postcss.config.js

module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    "tailwindcss/nesting",
    "postcss-nested",
  ],
};

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./src/components/**/*.{js,ts,jsx,tsx}",
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
};

在我的自定义 css 文件中，我尝试像这样使用它

.toolbar_navigation_items {
  li {
    @apply text-3xl;
  }
}

然后我收到错误

"(2:3) Nested CSS was detected, but CSS nesting has …

我有一个变量，我想用它来定义一个带有 TailwindCSS 的类：

const frac = // some integer between 0 and 12

使用此变量，该类定义将按预期工作：

className={
      (frac === 0 ? "w-0" : "") +
      (frac === 1 ? "w-1/12" : "") +
      (frac === 2 ? "w-2/12" : "") +
      (frac === 3 ? "w-3/12" : "") +
      (frac === 4 ? "w-4/12" : "") +
      (frac === 5 ? "w-5/12" : "") +
      (frac === 6 ? "w-6/12" : "") +
      (frac === 7 ? "w-7/12" : "") +
      (frac …

我附上了我想要实现的目标的粗略想法，虚线代表容器的中心。我试图将一个 div 元素居中对齐，然后将同一行中的第二个 div 右对齐，同时两个元素都水平居中。

我需要你们帮助如何更改单选按钮的背景颜色这是我的代码。
<input type="radio" className="form-radio h-6 w-6 checked:bg-white text-green-500 p-3 my-4" name="radio" value="1" /> 输出仍然与默认单选按钮相同。在此输入图像描述

我有一张卡片清单。单击每张卡片后，我希望它们能够展开并提供更多信息。我从服务器获取卡片并绘制它们。为了扩展单张卡而不是多张卡，我创建了一个状态 editIndex，它检查卡的 id，以便它可以正常工作并专门扩展该卡。我不知道如何同时扩展一张卡和另一张卡。因为现在如果我点击卡片，另一张展开的卡片就会折叠起来。

  const [studentList, setStudentList] = useState();
  const [input, setInput] = useState(" ");
  const [editIndex, setEditIndex] = useState(null);
  const [suggestions, setSuggestions] = useState(null);


 const handleExpand = (id) => {
 setEditIndex((e) => (e === id ? null : id))};
 
return (
<div
  className="flex
  flex-col 
  w-4/5
  h-[800px]
  overflow-scroll
  scrollbar-hide
  border 
  bg-white 
  rounded-xl
  "
>
  <div>
    {studentList?.map(
      ({
        city,
        company,
        email,
        firstName,
        grades,
        id,
        lastName,
        pic,
        skill,
      }) => (
        <div
          key={uuidv4()}
          onClick={(e) => handleExpand(id)}
          className="flex  border-b-2 py-2 px-7 xl:px-12 cursor-pointer
            mb-2 …

因此，我目前正在为我正在构建的网站使用 tailwindcss，我想用自定义颜色制作一个小圆圈。现在我用了这个方法

<span className={`h-3 w-3 rounded-full bg-[#${role.color.toString(16)}]`} />

基本上，role.color.toString(16)返回一个十六进制代码。我已经检查过了，是的，它确实发送了有效的十六进制代码。现在当我查看该网站时，它没有添加颜色。有人知道这个问题的解决办法吗？