标签: tailwind-in-js

有没有办法在 2 秒内将bg-red-300其设置并淡出/转换为bg-transparent不同的 bg 类，或者我是否需要 javascript？我想要一个元素突出显示，然后在 2 秒后恢复正常。谢谢你！

我正在尝试使用 设置登录部分的背景不透明度bg-opacity-75，但是当我将其添加到我的 className 中时，背景颜色就会消失。如果我使用opacity-75，所有子 div 都将是透明的，如果我使用opacity-100，背景颜色将消失，只有输入字段可见，它有点有线。另外，我正在使用tailwind.configtailwind v2.0.2 的默认文件。

这是我的代码：

...
        <div className={"h-screen w-screen py-10 lg:w-3/6"}>
            <div
                className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
                <Logo/>
                <Text/>
...

我也尝试过内联CSS，但仍然不起作用。 使用bg-opacity-75（输入后面应该有一个白色透明区域）

所以我使用 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 …

我对 Vue 和 Tailwind 完全陌生。我只是在查看https://tailwindui.com/components/marketing/elements/headers并看到了Requires JS标签。当我将代码复制粘贴到我的项目时，它给出了一个空白页面。我在哪里配置这部分以包含 JS？

我是 tailwind-css 的新手，我想要实现的是，可以说我在 component/index.js 中使用了一些 tailwindcss 类，并且我想在组件目录中生成 tailwindcss 的 index.css 文件，例如： component/index.css 。这样我每个文件夹都会有不同的 css 文件，而不是只有一个大文件。这件事可以使用 tailwind.config.js 文件中的清除来实现吗？

我使用 esbuild 在 Rails 7 上。我正在使用 tailwindUI。仅使用 css 组件时它可以正常工作。当一个组件使用 JS 时，它就不再起作用了。例如，下拉菜单默认打开，我无法关闭它。我在 tailwind.config.js 中添加了 require('@tailwindcss/ui')

Rails 7.0.0.alpha2 ruby​​ 3.0.2p107“@tailwindcss/ui”：“^0.7.2”

任何想法？

我想对我的背景图像应用线性渐变。在顺风配置文件中，我写了一个这样的自定义规则：

 theme: {
    extend: {
      backgroundImage: (theme) => ({
        'hero-pattern': "url('../src/images/icon-bg.jpg')",
  
      }),
    },
  },

有用。但是当我尝试应用线性渐变时，它不起作用。

为了应用线性梯度，我尝试过的是：

 theme: {
    extend: {
      backgroundImage: (theme) => ({
        
         'hero-pattern':
          "linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')",
      }),
    },
  },

但它没有用。

如何通过 Tailwindscss 使用 list-disc 类来设置项目符号样式？

我的 package.json 包括：

    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/line-clamp": "^0.2.0",
    "@tailwindcss/typography": "^0.4.0",
    "tailwindcss": "^2.1.1",
    "tailwindcss-stimulus-components": "^2.1.2",

我尝试使用<ul class="list-disc">不带和带 /typography 插件class="prose"，它们看起来不同，但都不像预期的那样，并且 Firefox 和 Chrome 看起来相同：

没有容器（列表 1），class="prose"项目符号完全没有样式，没有缩进，并且显示浏览器默认项目符号点。

使用class="prose"容器（列表 2），它确实创建了一个悬挂缩进和一个较轻的项目符号点，但也具有浏览器默认的项目符号点（因此是双项目符号）：

下面是创建该视图的 HTML：

  <div class="container mx-auto m-4">
    <h3>List 1</h3>
    <div>
       <ul class="list-disc">
        <li>Bullet one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one …

有一个使用 Tailwind CSS v3 构建的登录页面，所有样式都很漂亮。但在登录页面上，我希望有计时器警报，如果发生任何错误（例如无效电子邮件、已在使用的电子邮件），就会显示计时器警报。

做了什么：所以我<div id="su-error-container">在提交按钮上方的登录页面中创建了一个默认为空的元素，每当发生错误时，js 都会创建一个元素并将其附加到包含 Tailwind CSS 类的 div 中。

但问题是，诸如填充、边距、文本大小之类的类都可以正常工作，但文本颜色、背景颜色类则不起作用。代码：-

parentElement = document.querySelector("#su-error-container");
alertMainDiv = document.createElement("div");
alertSpan = document.createElement("span");
alertMainDiv.className = "mb-10 bg-red-500";
alertSpan.className = "font-medium";
titleTextNode = document.createTextNode(title);
messageTextNode = document.createTextNode(message);
alertSpan.appendChild(titleTextNode);
alertMainDiv.appendChild(alertSpan);
alertMainDiv.appendChild(messageTextNode);
parentElement.appendChild(alertMainDiv);

从 Chrome 开发工具复制的元素：

<div class="mb-10 bg-red-500"><span>Sign Up Error: </span>Invalid Email Address</div>

其他课程有效，但颜色课程，如果需要任何额外信息，请评论！

tailwind.config.js

    module.exports = {
      content: ["./*.html", "./assets/**/*.js"],
    
      theme: {
        screens: {
          sm: "540px",
          // => @media (min-width: 576px) { ... }
      md: "720px",
      // => @media …

这是我第一次安装和运行 tailwind CSS。我按照说明操作并相应地执行了所有操作，但随后它开始显示一些警告，如下所示

你能告诉我为什么我会收到这些警告以及无论如何我要解决它们吗？因为我担心我生成的 CSS 会丢失样式所以需要帮助来修复它

另外，我可以将 tailwind CSS 保持在监视模式吗？请给我命令行或视频或向我解释修复方法？先感谢您！