标签: tailwind-css
如何使用 Tailwind 将媒体查询应用于高度和宽度？
我想用 Tailwind 做这样的事情，
@/media screen and (max-width: 995px) , screen and (max-height: 700px) { ... }
是否可以？
推荐指数
解决办法
查看次数
为什么它说“hover:”类不存在。如果“hover:”是自定义类，请确保它是在“@layer”指令中定义的？
我是前端开发的新手，我尝试构建新的react-tailwindcss项目。我的项目抛出错误，例如“该类hover:不存在。如果hover:是自定义类，请确保它是在@layer指令中定义的。”，有什么想法吗？
全局.css：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.icon{
@apply hidden xl:inline-flex p-2 h-10 w-10 bg-gray-200 rounded-full text-gray-700
cursor-pointer hover: bg-gray-300;
}
.inputIcon{
@apply flex items-center space-x-1 hover: bg-gray-100
flex-grow justify-center p-2 rounded-xl cursor-pointer ;
}
}
推荐指数
解决办法
查看次数
如何使用 Svelte 组件中的 tailwinds @apply 和 @layer 指令
我想使用 apply 来定义组件上的一些 css 设置，并且我还希望能够覆盖它，如下所示：
<!-- CustomButton.svelte -->
<script>
let className = '';
export { className as class };
export let label = 'Click me!';
</script>
<button class="custom-button {className}">{label}</button>
<style lang="postcss">
.custom-button {
@apply bg-blue-400 font-bold text-white rounded-lg p-4;
}
</style>
我想这样使用它：
<script>
import CustomButton from './CustomButton.svelte';
</script>
<div class="w-screen h-screen flex justify-center items-center">
<CustomButton class="bg-red-800" label="This is my button" />
</div>
也就是说，我希望能够覆盖我的@applied 设置
问题是来自@apply指令的设置不能被这一行覆盖
<button class="custom-button {className}">{label}</button>
我知道，为了做到这一点，我必须告诉 tailwind 在组件层（即实用程序之前）生成相应的 css。
如果我在app.post.css文件中的行之前输入相同的 css 指令，@tailwind utilities或者使用该 …
推荐指数
解决办法
查看次数
如何在daisy-ui中自定义主题？
我想在daisyui中定制一个主题。是否可以自定义深色主题（仅修复一种颜色，或添加更多颜色条目）？
此外：是否可以向您的自定义主题添加新的颜色条目？
即我尝试了以下方法但没有成功：
daisyui: {
styled: true,
themes: [
"light", // first one will be the default theme
"dark",
{
mytheme: {
primary: "#793ef9",
"new-color": "#eff1ae",
"primary-focus": "#570df8",
},
},
"cupcake",
],
},
new-color...但是当我在我的 css ( ) 中使用新颜色时theme("colors.new-color")。我收到以下错误：
(146:7) /home/armwur/code/booking-overview/src/index.css 'colors.new-color' does not exist in your theme config. 'colors' has the following valid keys: 'inherit', 'current', 'transparent', 'black', 'white', 'neutral', 'primary', 'primary-focus', 'primary-content', 'secondary', 'secondary-focus', 'secondary-content', 'accent', 'accent-focus', 'accent-content', 'neutral-focus', 'neutral-content', 'base-100', 'base-200', 'base-300', 'base-content', 'info', 'success', …推荐指数
解决办法
查看次数
React 测试库无法使用 Tailwind CSS 类读取样式
我有一个简单的 React 组件，最初有一个 Tailwind CSS 类，hidden该类应用 CSSdisplay: none并将该类更改为visible单击按钮。当我用expect().not.toBeVisible()它进行测试时，它告诉我该元素在具有类时已经可见hidden。
如果我不使用 Tailwind CSS 并使用法线，style={{display: 'none'}}它将正确识别该元素不可见。这显然意味着问题出在 Tailwind CSS 上。
这是我的测试：
test("Notification bar should be initially hidden but visible on click", async () => {
render(<Notifications />);
expect(await screen.findByTestId("list")).not.toBeVisible();
// this test fails while the element already has a Tailwind CSS class of "hidden"
});
虽然这是我的组件：
<ul className="hidden" data-testid="list">
<li>item 1</li>
</ul>
推荐指数
解决办法
查看次数
如何在 TailwindCSS 中截断文本？
我truncate在 TailwindCSS 中使用，如果文本溢出超过一行，则使文本省略，但它不起作用。
我的代码在下面不起作用：
<div className="ml-1 inline-block">
<span>Label: </span>
<span className="font-semibold truncate">
long texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</span>
</div>
我该如何修复它？
推荐指数
解决办法
查看次数
将根类添加到 Laravel / Inertia
好吧，我要疯了……
我需要class="h-full"使用 Inertia 添加到 Laravel Jetstream 内的根 div。原因是在使用 Tailwind UI 的 vue 文件中，它需要以下内容
但是，每当我更改 app.blade.php 中的任何内容时，@inertia 都会覆盖它。我可以使用网络检查器手动添加它，该检查器可以解决它，但我不知道在应用程序内哪里可以对其进行修改。我不知道为什么。
请查看突出显示的 Web 检查器屏幕截图，了解它需要去哪里
下面的代码是 app.blade.php 文件。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
@routes
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased h-full">
@inertia
@env ('local') …推荐指数
解决办法
查看次数
如何在简单的纯 PHP 项目中使用 TailwindCSS？
我有一个非常基本的 PHP 项目。用纯 PHP 编写，没有任何框架。它只是从数据库中获取一些数据并作为列表打印。\n我想在这个项目中使用 TailwindCSS，但我无法找到一种可行的方法。官方文档涵盖了 Laravel 版本，但正如我所说，我没有使用任何框架或包管理器（如 Composer）
\n我尝试了这个文档：https://tailwindcss.com/docs/installation/using-postcss \n并在 tailwind.config.js 中添加了 PHP 扩展，但不起作用。
\n任何人都可以帮助我找到可行的解决方案吗？\n这是我的项目的示例结构。
\n.\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src/\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 css\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 js\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.php\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 db.php\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 header.php\n \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 footer.php\n \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 sidebar.php\n推荐指数
解决办法
查看次数
为什么顺风找不到我的动态类？
所以我尝试根据对象数组动态加载类
<div v-for="item in items"
:key="item.id"
:class="'text-' + item.color + '-600'"
>
{{ item.name }}
</div>
我检查了浏览器上的元素面板，类属性加载正确，但 css 没有。
为什么会这样？任何帮助将不胜感激。
推荐指数
解决办法
查看次数
如何在浏览器上使用 TailwindCSS 强制暗模式？
我有一个网站，使用 TailwindCSS 正确实现了深色/浅色 UI。
我想知道是否有一种方法可以强制网站以深色模式加载，直到用户通过单击切换按钮专门切换浅色模式。
为什么？因为我更喜欢网站在深色模式下的外观，但由于正确实现了浅色/深色主题，我宁愿保留它并强制它以深色模式加载，无论用户的浏览器设置如何。
推荐指数
解决办法
查看次数