标签: tailwind-ui
在顺风中同时将效果应用于多个伪类
我正在寻找一种很好的速记法，将相同的效果应用于顺风中的多个伪类。
例如，我可能想将蓝色背景应用于 div 上的 :hover 和 :focus 状态。
目前我必须写以下内容：
<div className="hover:bg-blue focus:bg-blue>Text<div>
或者，我可以使用 apply 构建一个自定义类，如下所示：
.hover-focus-bg-blue {
@apply hover:bg-blue focus:bg-blue
}
但是，当我必须应用复杂的状态时（在我当前的项目中，我需要覆盖一个元素上的 11 个状态（休息/悬停/活动/焦点/焦点可见/焦点可见 && 悬停等），这些都不是很好的选择。
apply 方法仅在多次使用时才保存代码。
我想看到的是这样的：
<div className="[hover, focus]:bg-blue">Text</div>
有谁知道类似的语法吗？到处都找不到。
5
推荐指数
推荐指数
1
解决办法
解决办法
2181
查看次数
查看次数
Tailwind - 截断单行文本
<div
className={classNames(
job.isFeatured ? 'bg-yellow-200' : 'bg-white',
'relative shadow md:rounded-sm hover:shadow-md'
)}
>
<Link href={`/jobs/${encodeURIComponent(job.jobId)}`}>
<a className="block p-4 sm:px-6">
<div className="flex items-center">
<div className="flex flex-col flex-grow md:items-center md:space-x-3 md:flex-row">
<h4 className="text-sm text-gray-500 uppercase truncate md:w-24">
{job.company_name}
</h4>
<h3 className="font-medium text-gray-700 truncate overflow-ellipsis">
{job.title}
</h3>
</div>
<div className="flex flex-col items-end flex-grow-0 flex-shrink-0 text-right md:space-x-5 md:flex-row">
<div className="flex items-center mb-1 text-sm text-right text-gray-600 md:mb-0">
<span className="text-right">
{job.isRemote ? (
<>
<GlobeIcon
className="inline-block w-4 h-4 mr-1"
aria-hidden="true"
/>
Remote
</>
) : ( …4
推荐指数
推荐指数
1
解决办法
解决办法
4378
查看次数
查看次数
如何在我的 nextjs 应用程序中更新我的模板
我使用 tailwind css 构建我的 nextjs 应用程序，所以我从 tailwind ui 复制此模板，它说要使其正常工作，我必须..
{/*
This example requires updating your template:
```
<html class="h-full">
<body class="h-full">
```
*/}
我不确定我必须更新的内容在哪里。这就是我的 tailwind.config.js 的样子，
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
如果你们能帮助我，我将不胜感激，谢谢！
4
推荐指数
推荐指数
1
解决办法
解决办法
2686
查看次数
查看次数
Tailwind CSS 类无法与 React 一起使用，错误“您需要启用 JavaScript 才能运行此应用程序...”
Talwind CSS 不适用于 React。我已经按照文档（https://v1.tailwindcss.com/docs/installation）安装了 Tailwind CSS，我的代码如下。
有人能帮我吗？
这是我的 package.json 文件
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"autoprefixer": "^10.4.2",
"postcss-cli": "^9.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"tailwindcss": "^3.0.18",
"web-vitals": "^2.1.4"
},
"scripts": {
"build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/style.css",
"start": "npm run build:css && react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [ …4
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
我可以创建具有任意值的自定义类 Tailwindcss
我想在 Tailwindcss 中创建一个具有任意值的类，例如
超文本标记语言
<button class="my-custom-class[#fff]" />
CSS
@layer componenets {
.my-custom-class {
@apply bg-[--here-arbitrary-value]; /** the value is #fff */
}
}
4
推荐指数
推荐指数
1
解决办法
解决办法
3549
查看次数
查看次数
下拉列表未按预期工作 Tailwind css
我将 tailwind 与 cdn 结合使用，只需复制粘贴 flowbite 上的下拉列表之一：
<button id="dropdownDefault" data-dropdown-toggle="dropdown" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">Dropdown button <svg class="ml-2 w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>
<!-- Dropdown menu -->
<div id="dropdown" class="z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 block" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(327px, 70px, 0px);">
<ul class="py-1 …4
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
tailwindcss：动画旋转未显示
我想包含一个来自 tailwind-css 的加载旋转器，根据 tailwindcss 文档，这应该可以通过 className="animate-spin" 获得。
我正在使用 Vite 创建的 React18。除了 tailwindcss 之外，我还安装了 daisyui。
当我应用“animate-spin”并在浏览器中检查时，我可以看到当我选择微调器时它已被添加。它肯定在那里并在我的按钮元素中旋转，但由于某种原因，它只是不显示/是透明的。
这是我的代码：`
<div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
<button
type="submit"
className="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<svg className="animate-spin h-5 w-5 mr-3"></svg>
Loading...
</button>
</div>
`
我尝试从按钮类名中取出“边框透明”，但它仍然没有显示。
感谢任何了解 Tailwind 的人提供的帮助。除了顺风导入和应用通用字体之外，我的 App.css 和 index.css 都是空白的。
我尝试使用微调器调整 svg 元素的颜色和背景颜色属性。到目前为止，仅将背景颜色设置为白色即可使其显示，但仅作为旋转的方块显示。
我尝试将 text-white 调整为 svg 元素，但它没有显示，并且更改颜色属性也不会使其显示。
4
推荐指数
推荐指数
1
解决办法
解决办法
7239
查看次数
查看次数
Tailwind 徽章上的通知编号
我需要创建一个通知号码，如第二张图片所示，这是我在 Figma 中的模型。至于现在我那三个徽章是这样写的。
<div className="mt-3">
<span className="bg-indigo-100 text-indigo-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-900">
Indigo
</span>
<span className="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900">
Purple
</span>
<span className="bg-pink-100 text-pink-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-900">
Pink
</span>
</div>
我正在使用 Storybook、Tailwind UI 和 React (18)。
3
推荐指数
推荐指数
1
解决办法
解决办法
2219
查看次数
查看次数
我收到错误模块未找到：错误：无法解析“@heroicons/react/solid”
我跑了
npm install @heroicons/react
我的 package.json 看起来像这样：
"dependencies": {
"@headlessui/react": "^1.6.6",
"@heroicons/react": "^2.0.0",
...
但由于某种原因我无法让它工作！
我仍然收到此错误
请帮我一下。我不明白这里有什么问题？
3
推荐指数
推荐指数
1
解决办法
解决办法
4759
查看次数
查看次数
Tailwind - 保持标题和左/右侧边栏粘在滚动上
如何使标题、左/右侧边栏粘在滚动条上（在桌面上，而不是移动设备上）？
它似乎不适用于固定或粘性类，我在这里发布了一个示例： https: //play.tailwindcss.com/Bj68nUJj1C。
<!-- Background color split screen for large screens -->
<div class="fixed top-0 left-0 h-full w-1/2 bg-white" aria-hidden="true"></div>
<div class="fixed top-0 right-0 h-full w-1/2 bg-gray-50" aria-hidden="true"></div>
<div class="relative flex min-h-screen flex-col">
<!-- Navbar -->
<nav class="flex-shrink-0 bg-indigo-600">
<div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<!-- Logo section -->
<div class="flex items-center px-2 lg:px-0 xl:w-64">
<div class="flex-shrink-0">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=300" alt="Workflow" />
</div>
</div>
<!-- Search section -->
<div class="flex flex-1 …3
推荐指数
推荐指数
1
解决办法
解决办法
8360
查看次数
查看次数
标签 统计
tailwind-ui ×10
tailwind-css ×9
reactjs ×5
css ×4
daisyui ×1
heroicons ×1
html ×1
next.js ×1
package.json ×1
storybook ×1
truncate ×1
vite ×1