我对 Tailwind 非常陌生，希望将其合并到现有的 React 项目中。我可以将 Tailwind 与我当前的所有 CSS/sass 文件一起使用吗？或者我是否需要从头开始设计并且只使用 Tailwind？

背景与问题：

我正在使用 Tailwind CSS 和 Alpine.js 作为一个简单的搜索栏，该搜索栏的下拉列表使用 absolute

Codepen 在这里：https ://codepen.io/jdonline/pen/YzXpbyJ

当我使用 定位下拉菜单时relative，它会按照我想要的方式完美定位（但会拉伸我不想要的页面的其余部分）。但是，当我将其更改为 时absolute，虽然它不再拉伸页面，但它会将下拉菜单扩展得比预期的更宽。

例子：

您可以通过单击搜索栏右侧的下拉箭头来查看此信息。您还可以看到差变更时absolute要relative在第26行

题：

我如何使用 Tailwind.css 定位下拉列表，使其具有absolute位置，但不会扩展到比搜索栏更宽的位置？

如何为默认方案添加颜色？这是我的 tailwindcss 文件。

const { colors: defaultColors } = require('tailwindcss/defaultTheme')

module.exports = {
    "theme": {
        "colors": defaultColors + {
            "custom-yellow": {
                "500": "#EDAE0A",
            }
        },
    },
};

在使用 tailwind css 转换网站的过程中。我有一个元素，在悬停时为其子元素设置动画。我正在努力了解如何使用 tailwind css 来做到这一点。

这是使用基本 CSS 的代码

.cont:hover .hoverme{
  animation: hoverwave;
  animation-duration: .5s;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes hoverwave {
  0%{transform: scale(1,1);}
  100%{transform: scale(1.2,1.2);}
}

<!-- PROJECT1 START-->
<div class="cont overflow-hidden w-projmob mx-4 sm:w-projmob-md lg:w-projmob-xl opacity-90 cursor-pointer transition duration-300 mt-20 h-auto border-box bg-white rounded-lg shadow-lg hover:opacity-100">

////////////////

<div class="w-full h-20 absolute bottom-0 -left-5 z-20">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="width: 150%;" class="hoverme"><path fill="#fff" fill-opacity="1" d="M0,32L48,53.3C96,75,192,117,288,128C384,139,480,117,576,106.7C672,96,768,96,864,117.3C960,139,1056,181,1152,186.7C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
</div>
</div>

///////////////

</div>
<!--PROJECT END-->

当悬停容器 .cont 时，类 .hoverme …

Lot of blogs and posts purport to create a "sticky footer" using Tailwindcss, but none that I can find thought about the case where there is more than a short "hello world" line of content:

For example in none of these examples does the footer "stick" if the main area is tall enough to scroll.

https://www.gomasuga.com/blog/creating-a-sticky-footer-with-tailwind

Tailwindcss: fixed/sticky footer on the bottom

https://medium.com/@milanchheda/sticky-footer-using-tailwind-css-1c757ea729e2

... and several codepen examples.

Is there a way with Tailwindcss to create a small footer that …

我正在构建一个 Next JS 网站并使用 JIT 运行 Tailwind。这是我的 tailwind.config.js：

  module.exports = {
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  extend: {},
  plugins: [],
  };

问题是，每次我编写新代码时，我都必须重新启动服务器并运行“npm run dev”，因为它没有更新 http://localhost:3000/ 上的 CSS。

当我运行服务器时，我也会收到警告：

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

有什么想法可能导致这种情况吗？谢谢！

我正在使用 NextJs 和 TailwindCSS 开发一个个人项目。

完成项目后，我使用私人导航器来查看进度，但似乎笔画没有按应有的方式工作，我在除 Chrome 之外的所有浏览器中都遇到了这种情况。

这是我得到的：

这是所需的行为：

代码：

<div className="outline-title text-white pb-2 text-5xl font-bold text-center mb-12 mt-8">
      Values &amp; Process
</div>

CSS：

.outline-title {
  color: rgba(0, 0, 0, 0);
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

有人可以解释或帮助解决这个问题吗？

浏览器兼容性：

假设您有一个基本的项目设置：

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

并且您想要添加一个使用 CSS 的基本实用程序，该实用程序不属于 tailwinds 默认库的一部分：

@layer utilities {
  .will-change-transform {
    will-change: transform;
  }
}

或者

@layer utilities {
  .ease {
    transition: ease;
  }
}

并且您希望能够将@apply其传递给自定义类而不会收到错误：

.my-component {
  @apply block hover:scale-110 w-full ease will-change-transform
}

你会怎么做？

我正在努力将一个新的 Rails 7 项目部署到生产环境（尝试使用 Heroku 和 Render.com），但在构建过程中出现以下错误：

$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css

       Done in 408ms.
       Done in 0.90s.
       rake aborted!
       SassC::SyntaxError: Error: Function rgb is missing argument $green.
               on line 428 of stdin
       >>   color: rgb(29 78 216 / var(--tw-text-opacity));

          ---------^
       stdin:428

这就是我认为相关的部分，但是如果有帮助的话，这里有更多输出的上下文。

Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       yarn install v1.22.17
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       [3/4] Linking dependencies...
       [4/4] Building fresh packages...
       Done in 5.10s.
       yarn run v1.22.17
       $ esbuild app/javascript/*.* …

我目前正在使用 NextJS、TailwindCSS 和 MUI React UI 库构建一个项目。

每当我尝试向我的项目添加 MUI 按钮时，它工作正常，但按钮的颜色保持白色。

悬停时颜色恢复正常，单击按钮时仍然具有波纹效果。但当不悬停时，它会返回白色。

通过从我在 _app.{js,jsx.ts,tsx} 文件中导入的全局 css 文件中删除 tailwind 指令，该按钮再次正常工作，但这也将删除 TailwindCSS。

有没有办法在保留指令的同时修复它？或者可能使用另一种方法包含 tailwind CSS？

更新（15/8/2022）

MUI 团队现在添加了对 tailwind CSS 的支持，请点击此链接获取说明 https://mui.com/material-ui/guides/interoperability/#tailwind-css