标签: tailwind-css
如何使用 TailwindCSS 指定 height: fit-content ？
使用 TailwindCSS 我试图适应<div>它的孩子的高度，a <button>。我的代码如下：
<form className="w-full flex h-96 gap-2 mt-8 flex-wrap">
<textarea
role="text-input"
className="resize-none flex-1"
placeholder="INPUT"
/>
<textarea
role="text-output"
className="resize-none flex-1"
placeholder="OUTPUT"
readOnly
/>
<div className="w-full flex flex-none"> // This is the troublesome div
<button>
Submit!
</button>
</div>
</form>
阅读文档并进行谷歌搜索，我似乎找不到一种方法来做到这一点，理想情况下，我想设置一个类，例如h-fit-content（类似这样的东西），但它似乎不存在。
提前致谢！
推荐指数
解决办法
查看次数
Tailwind CSS，某些自定义颜色不起作用
我试图通过tailwind.config.js扩展编写一些主题来在我的项目中使用 Tailwind 自定义颜色。
module.exports = {\n content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n theme: {\n extend: {\n colors: {\n s2condPurple: '#a32eff', // works \xe2\xad\x95\xef\xb8\x8f\n s2condPink: '#ff0099', // works \xe2\xad\x95\xef\xb8\x8f\n s2condOrange: '#ff5f55', // works \xe2\xad\x95\xef\xb8\x8f\n s2condYellow: '#ffe600', // doesn't work \xe2\x9d\x8c\n s2condLime: '#cdff64', // works \xe2\xad\x95\xef\xb8\x8f\n s2condMint: '#2af1b5', // works at 'text-s2condMint' but not at 'border-s2condMint'\n secondTest: '#ffe600', // works \xe2\xad\x95\xef\xb8\x8f <-- I tested it for s2condYellow but it works perfectly!\n s2condTest2: '#2af1b5', // doesn't work \xe2\x9d\x8c\n ...\n },\n \n },\n },\n …推荐指数
解决办法
查看次数
NextJS - Google 字体未加载或显示在网站上
按照文档并使用提供的代码添加 _document.js 文件：
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
当我使用 chrome 扩展字体检查器并在检查器中进行验证时，它指出它使用默认字体。知道如何让它发挥作用吗？我使用 tailwindcss 可能会受到一些干扰吗？
推荐指数
解决办法
查看次数
Tailwind 文档中给出的默认颜色不起作用
我尝试使用文档中提到的琥珀色和石灰色等颜色。这些颜色不起作用。只有具有原色名称（例如红色、粉色）等名称的颜色才有效。
无效的颜色：琥珀色、翠绿色、石灰色、玫瑰色、紫红色、板岩色、锌色，甚至橙色。
我使用的是 2.26 版本，但我使用 Tailwind Playground 检查了 1.9 到 2.25 之间的版本，但这些颜色仍然不起作用。即使在操场上，也不建议使用这些颜色名称。
为什么我不能使用这些颜色？
推荐指数
解决办法
查看次数
如何在 tailwind css 中的条件上添加样式
我正在使用 tailwind css 在 React 中制作侧导航，当选择特定链接时，我必须添加边框红色。所以我正在使用这种方法但这不起作用任何人都可以在这里帮助我
<li className={"flex items-center space-x-2 px-4 py-5 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 border-l-4 border-white" + (window.location.pathname === '/' ? 'border-red-200' : '')}>
<NavLink to={"/"}>
<div className="sidebar">
<div className="float-left">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-6 text-red-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 …推荐指数
解决办法
查看次数
如何通过 Typescript 使用 TailwindCSS 的解析配置
我将以下代码导入到我的 .tsx 组件中：
import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../../../tailwind.config.js';
const fullConfig = resolveConfig(tailwindConfig)
如果我随后引用，fullConfig.theme.colors["blue"]["700"]则会收到一条错误消息：
元素隐式具有“any”类型，因为“blue”类型的表达式不能用于索引类型“TailwindThemeColors”。类型“TailwindThemeColors”上不存在属性“蓝色”。
颜色的 Tailwind 类型定义是：
export type TailwindColorValue = string | TailwindColorGroup | TailwindColorFunction;
export interface TailwindValuesColor {
readonly [key: string]: TailwindColorValue;
}
由于该类型没有明确指出这"blue"是一个值并且它可能是一个对象，所以这就是错误的原因（我认为）。
我遇到的另一个问题是我的 中出现错误tsconfig.json，因为我正在导入 JS 文件。添加并"exclude": ["tailwind.config.js"]不能解决问题。
我很确定这是一个 Typescript 问题，而不是 Tailwind 问题......
我的问题是：
- 如何让 Typescript 了解
"blue"顺风主题中颜色的属性，以及 - 如何阻止导入 JS 配置时出现 tsconfig 错误？
推荐指数
解决办法
查看次数
如何在 React 项目中将 Antdesign 与 tailwindcss 一起使用
我要建立一个新项目，并希望将这两个包放在一起，但不确定，所以问题是，将 Tailwindcss 与 antdesign 一起使用是一个好的做法吗？
有人有经验吗？
每个包都有自己的主题管理器，例如颜色、排版、深色模式等。你如何管理主题，使用 Tailwinds 或 antd 或两者兼而有之？为什么？
这两个软件包都支持网格，您更喜欢哪一个？
让我们来谈谈您的见解？
经过一番研究，我发现了这些结果
使用这两个库的一些示例：
https://github.com/plamworapot/next-antd-tailwindcss
https://github.com/dospolov/react-redux-saga-antd-tailwind-boilerplate
https://github.com/cunhamuril/pocs
它建议尝试只致力于一个框架
推荐指数
解决办法
查看次数
配置postcss.config.js（主要是tailwndcss）的规则到底是什么？
postcss.config.js用于展示如何配置的变体数量非常令人困惑。有一些tailwindcss使用此功能的示例（例如文档中的示例）：
// Example 1:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
然后是那些需要库的：
// Example 2:
module.exports = {
plugins: {
require('tailwindcss'),
require('postcss-preset-env')({
stage: 0,
'nesting-rules': true
})
},
}
其他人在配置之前需要外部库module.exports：
// Example 3:
const tailwindcss = require('tailwindcss');
const postcssPresetEnv = require('postcss-preset-env');
module.exports = {
plugins: {
tailwindcss,
postcssPresetEnv
},
}
当必须合并未根据默认值命名的配置文件时，还有更多必要的内容。
yarn dev今天，当使用 postcss.config.js运行时，我收到此错误，如示例 2 所示：
Syntax Error: /[path]/_pod-test/postcss.config.js:3
require('tailwindcss'),
^^^^^^^^^^^
SyntaxError: Unexpected string
当我删除带有“tailwindcss”的行时，“postcss-preset-env”也会发生同样的情况：
Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
require('postcss-preset-env')({ …推荐指数
解决办法
查看次数
使用 Tailwind-CSS 时，您如何摆脱这些 SASS linting 错误？
我在 Gatsby.js 项目中使用 Tailwind。我的环境是 VSCode，使用 Prettier 代码格式化程序。
如何摆脱这些 linting 错误警报？
推荐指数
解决办法
查看次数
Tailwind CSS 类的 Typescript 类型
Tailwind CSS 类的打字稿类型是否存在于任何地方？
我正在尝试将一些顺风类作为 prop 传递给 React 组件，并希望正确键入它。
推荐指数
解决办法
查看次数
标签 统计
tailwind-css ×10
reactjs ×6
css ×5
typescript ×3
antd ×1
fonts ×1
google-fonts ×1
javascript ×1
next.js ×1
postcss ×1
prettier ×1
sass ×1
tailwind-ui ×1
tsx ×1
vue-cli ×1
vue.js ×1