标签: tailwind-css

我将 TailwindCSS 与 DaisyUI 结合使用（通过 CDN）。

使用DaisyUI Dropdown时，有什么方法可以更改下拉项的颜色吗？这包括下拉列表本身的背景颜色，然后将鼠标悬停在项目上（CSS：hover），然后单击它（CSS：active）。

（点击时）

到目前为止，我已经能够更改下拉列表本身以及悬停时的背景颜色。

<div class="dropdown">
    <div tabindex="0" class="m-1 btn clickables btn-green shadow">
        <p class="text-medium">Testing</p>
    </div>
    <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-white text-black rounded-box w-52 text-sm">
        <li class="rounded hover:bg-gray-300 dropdown-active">
            <a href="page-one.html">Protecting your privacy</a>
        </li>
    </ul>
</div>

当单击列表颜色（CSS 活动）时，我似乎无法获取：

.dropdown-active:active {
   background-color: #0B6339 !important; 
}

我正在尝试更改 Web 应用程序所有页面的默认屏幕背景颜色。

我使用的技术：

1. 反应JS
2. 下一个JS
3. 顺风 CSS

我想将所有页面的屏幕背景颜色设置为如图所示的浅灰色，而不是默认的白色。

有没有办法一次性完成所有这些，或者我们需要手动为每个页面添加背景颜色？

我正在开发一个 Vue + Nuxt + Tailwind 项目，并使用标记库将文本转换为 Markdown。

问题是，某些样式（例如“标题”和“链接”）可以正确加载，而某些基本样式（例如“粗体”、“斜体”）则可以正常加载。

例如：

• 当我使用“*hello* world”时，它会转换为“ hello world”。
• 当我使用“#hello world”时，它不会增加文本的大小。
• 当我使用“[google]( https://google.com )”时，它确实创建了一个链接，但该链接不是蓝色的。

不确定这里的问题是什么。如果需要更多详细信息，请告诉我。

TailWind CSS 中的媒体查询无法正常工作。

我的代码是这样的

<img src={MYIMAGE} alt="Test Image" className="h-6 w-8 rounded-md gfold:h-8 gfold:w-14 gfold:rounded-xl sm:h-16 sm:w-24 " />

gfold-> (400px)- 我在文件中包含的媒体大小tailwind.config.js。
sm-> (640px)- Tailwind 附带的默认介质尺寸。

当媒体尺寸低于sm尺寸时是正确的，但是当我的屏幕大于sm尺寸时，尺寸不会改变。

现在我该怎么办？请帮助我，我是 Tailwind CSS 的新手。

我在顺风CSS中的悬停上显示子菜单，

我如何通过执行 onclick 事件而不是悬停事件来实现完全相同的功能。

演示版

代码：

<div class="group">
 <span class="font-bold text-gray-700"> Admission</span>
 <div class=" hidden group-hover:block  bg-white  w-auto">
  
<div class="p-3 hover:bg-gray-200 ">
  Admission Process
</div>
<div class="p-3 hover:bg-gray-200"">
  option 1
</div>
<div class="p-3 hover:bg-gray-200"">
  option 2
</div>
 </div> 
</div>

有没有办法只使用 tailwind css 或 js ？

我想知道如何从div特定xl屏幕尺寸的现有背景中删除背景颜色？我想要这样的东西background-color:unset，这可以吗tailwind.css？

<div class="fixed bottom-0 bg-baseorange p-4 left-0 w-full z-10 xl: bg-none xl:absolute lg:absolute xl:bottom-22 xl:right-20 lg:bottom-22 lg:right-20">
</div>

我需要在移动视图中隐藏一个元素并在中等视图中显示相同的元素。

我试过这个，

<p classname="hidden md:visible">Hello</p>

但似乎不起作用

我是顺风新手，我正在尝试使悬停时图像变暗。这是我的 config.js

theme: {
extend:{
backgroundImage: (theme) => ({
        video: "url('./bg-img.jpg')",
})
}
},

variants: {
boxShadow:["responsive", "hover", "focus"]
}

这是我的代码：

<div className=" h-80 my-4 w-64 rounded-md p-4 bg-video bg-cover bg-center shadow-lg cursor-pointer group hover:bg-black transition-all duration-1000">
<h1 className="uppercase text-2xl text-golden font-black group-hover:text-secondary transition-all duration-500">
 video
</h1>
</div>

我无法让右侧的“独立滚动”div 独立于其左侧的同级 div 滚动。我希望能够在不更改评论之外的任何内容的情况下执行此操作<!-- CONTENT START --> <!-- CONTENT END -->。似乎很接近，但我被困住了。“滚动”和“独立滚动”div 始终一起滚动。我正在https://play.tai​​lwindcss.com/中运行此 程序，任何帮助将不胜感激。

<div class="flex bg-gray-100 justify-center">
  <div class="flex flex-col w-full max-w-5xl pb-7">
    <nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
      <div class="flex w-1/3">
        {Left}
      </div>
      <div class="flex justify-center  w-1/3">
        {Middle}
      </div>
      <div class="flex justify-end items-center w-1/3 gap-2">
        {Right}
      </div>
    </nav>

    <!-- CONTENT START -->
    <div class="flex">
      <div class="w-2/3">
        <div class="sticky top-16 w-full h-20 mb-2 bg-green-500">
          Don't scroll
        </div>
        <div class="w-full h-96 mb-2 …

我在 symfony 6 应用程序中更新到 TailwindCSS 3。当我编译样式表时，没有错误（编译成功），但所有顺风类样式都不起作用。我注意到 tailwind 的导入似乎不是从 @tailwindcss 调用翻译的（它们只是按原样包含在浏览器中）。也许是 postCSS 问题？

webpack.config.js:

const Encore = require('@symfony/webpack-encore');
const path = require('path');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build') …