标签: tailwind-css

我正在使用 Flutter 进行第一步，我想知道是否可以使用顺风样式和组件。

谢谢

我想从输入字段中删除箭头，但我想将其范围限制为仅此组件的文本字段。

<v-text-field
  class="inputPrice"
  type="number"
  v-model="$data._value"
  @change="sendValue"
  > 
</v-text-field>

<style scoped>

.inputPrice input[type='number'] {
    -moz-appearance:textfield;
}
.inputPrice input::-webkit-outer-spin-button,
.inputPrice input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;  
}

</style>

我的文本字段

我尝试从类似的问题中使用此解决方案：https://github.com/vuejs/vue-loader/issues/559#issuecomment-271491472

以及这个： https: //github.com/vuetifyjs/vuetify/issues/6157#issue-399264114

但它们似乎并没有真正发挥作用。

我有以下 React 代码（+Tailwind CSS）：

<section className={"flex flex-col items-center"}>
      {managers.map((manager) => (
        <UserCard user={manager} />
      ))}

      <section className={"flex flex-row"}>
        {coWorkers.map((coWorker) => (
          <UserCard user={coWorker} isMarked={user.id === coWorker.id} />
        ))}
      </section>

      {engineers.map((engineer) => (
        <UserCard user={engineer} />
      ))}
    </section>

虽然 UserCard 很简单：

export default function Error({ user, isMarked }: Props) {
  return (
    <article
      className={`bg-purple-500 shadow-lg m-3 p-3 text-white rounded-lg ${
        isMarked && "border-4 border-purple-800 font-bold"
      }`}
    >
      <h1>
        {user.firstName} {user.lastName}
      </h1>
      <h2>{user.email}</h2>
    </article>
  );
}

问题：卡片的宽度不同，例如：

知道如何使用 tailwindcss 确保它们的宽度相同吗？（每行/列）

如何在轨道发动机中使用顺风？根据文档，向 Rails 生成器提供 css 参数应该可以工作

使用 Rails 7.0.2.2 引擎生成

rails plugin new tailtest --mountable --full -d postgresql --css tailwind

这会使用 Postgresql 生成引擎，但对 tailwind 根本不起作用，并且遵循手动安装说明也会失败。

根据文档运行，bundle add tailwindcss-rails将 tailwind 添加到 gemfile 而不是引擎 tailtest.gemspec 因此，在将依赖项添加到 gemspec 之后

spec.add_dependency "tailwindcss-rails", "~> 2.0"

并且运行bundle install确实安装了引擎，但是其余的手动安装失败

然后将 require 添加到 lib/engine.rb

require "tailwindcss-rails"
module Tailtest
  class Engine < ::Rails::Engine
    isolate_namespace Tailtest
  end
end

然后运行安装过程失败

rails tailwindcss:install
Resolving dependencies...
rails aborted!
Don't know how to build task 'tailwindcss:install' (See the list …

我正在开发一个安装了 Tailwind CSS 的 Angular 12 项目。我遵循了官方文档，似乎一切正常；但我无法理解为什么有些课程有效而其他课程无效。

例如，我可以使用这段代码，尝试在我的 div 上添加两个 Tailwind 类：

<div class="text-center mt-2">\n\n    <h2>Please go back to <a class="custom-links" href="./login">login</a></h2>\n</div>\n

text-center 类可以工作，但 mt-2 不能\xc2\xb4t。整个项目都在发生这样的事情。我解决这个问题的方法是使用传统的 CSS 或将其与 Tailwind 混合，如下所示：

<div id="back-to-login" class="text-center">\n\n    <h2>Please go back to <a class="custom-links" href="./login">login</a></h2>\n</div>\n

在CSS上：

#back-to-login{\n    \n    margin-top: 40px;\n\n}\n

然后它工作正常并且应用了 margin-top 。

你知道会发生什么吗？

像这里建议的那样重新安装node_modules并不能解决这个问题。

多谢。

我添加了 styles.css 和 tailwind.config 的代码

样式.css

/* You can add global styles to …

我正在尝试使用通过 props 传递的十六进制颜色代码来设置 div 的背景颜色。这些是动态生成的一次性颜色，因此不能作为主题扩展添加到tailwind.config.

我认为模板文字是实现此目的的最佳方法，但无法使其与 Tailwind CSS 中的任意颜色值一起使用。

interface Props {
  color: string;
}

const ColorSwatch = ({ color }: Props) => {
  return (
    <div className="flex flex-col gap-1 p-2">
      <div
        className={`h-20 w-20 border border-gray-400 shadow-md bg-[${color}]`}
      ></div>
      <p className="text-center">{color}</p>
    </div>
  );
};

export default ColorSwatch;

将十六进制颜色代码直接粘贴到 className 列表中会产生预期结果，但尝试在模板文字中使用 prop 值会导致透明背景（未应用背景效果）。

寻求有关如何纠正此问题的建议或使用通过道具传递的十六进制代码动态设置背景颜色的不同方法。

我正在使用Vue.jsand开发一个项目Tailwind CSS，对于同一行代码我收到此错误两次

Unknown at rule @apply css(unknownAtRules)

当使用以下样式时

<style scoped>
     #home {
       @apply bg-accent-gradient;
     }
</style>

我找到了一个将PostCSS Language Support Extensions和以下内容添加到我的 vscode 设置中的方法

"css.lint.unknownAtRules": "ignore"

我添加了它，但它只删除了一个错误，而不是两个错误。

当我将它与 tailwindcss“播放 CDN”一起使用时，VSCode 中的 Tailwind 智能感知不起作用。有没有任何解决方案或任何其他扩展可以帮助我。

我正在创建一个可重用的组件按钮，我想将两个 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")}
/>

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

所以我使用 flowbite 和 tailwind css 来开发我的 React 应用程序。我遵循了他们的网站中提到的所有标准安装程序，以使用 React 设置 Flowbite，请在此处参考文档： https: //flowbite.com/docs/getting-started/react/

因此，在完成基本设置过程后，我的 tailwind 文件如下所示：

module.exports = {\n    content: [\'./src/**/*.{js,jsx,ts,tsx}\', \'./node_modules/flowbite/**/*.js\'],\n    theme: {\n        extend: {},\n    },\n    plugins: [require(\'flowbite/plugin\')],\n}\n    \n

当我需要 Flowbite 插件时，我不断收到的错误是：

    > Could not find a declaration file for module \'flowbite/plugin\'.\n    > \'C:/dev/flowbite-test/node_modules/flowbite/plugin.js\' implicitly has\n    > an \'any\' type.   Try `npm i --save-dev @types/flowbite` if it exists\n    > or add a new declaration (.d.ts) file containing `declare module\n    > \'flowbite/plugin\';`\n    \n

这里还有我的 app.js …