标签: tailwind-css
TailwindCSS 3 类不会覆盖以前的类
我面临着 CSS 世界中令人头疼的问题。TailwindCSS 3 类只是不会覆盖以前的类。
例如，我创建了这个组件：
import * as React from "react";
const TextBox = ({ addClassName, children }) => {
const className = `text-xl leading-7.5 font-lato font-normal ${addClassName}`;
return <div className={className}>{children}</div>;
};
export default TextBox;
然后我继续在另一个地方使用上面的这个组件，如下所示：
<TextBox addClassName="text-4xl">My New Text</TextBox>
现在，当我在浏览器中检查它时，它会显示两种字体大小： 来自浏览器检查的屏幕截图
class="text-xl leading-7.5 font-lato font-normal text-4xl"
正如你所看到的，这两个类都在那里，都指的是字体大小，并且较大的类在较小的类之后。
并且仍然只有小（原始）字体大小将占主导地位。
（作为旁注，我也尝试将addClassName变量放在前面，没有帮助）
为什么是这样？
我很感激任何帮助解决这个问题。谢谢
推荐指数
解决办法
查看次数
TypeError: Object.entries(...).flatMap 不是函数
我创建了一个 React 应用程序，然后将 Tailwind 集成到它。当我跑时npm start，我收到了这个错误。
TypeError: Object.entries(...).flatMap is not a function[![enter image description here][1]][1]
TypeError: Object.entries(...).flatMap is not a function
at flattenColorPalette (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/tailwindcss/lib/util/flattenColorPalette.js:8:83)
at /media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/tailwindcss/lib/plugins/divideColor.js:27:53
at plugins.forEach.plugin (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/tailwindcss/lib/util/processPlugins.js:69:5)
at Array.forEach (<anonymous>)
at _default (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)
at /media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/tailwindcss/lib/processTailwindFeatures.js:60:54
at LazyResult.run (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/postcss/lib/lazy-result.js:288:14)
at LazyResult.asyncTick (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/postcss/lib/lazy-result.js:212:26)
at LazyResult.asyncTick (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/postcss/lib/lazy-result.js:225:14)
at /media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/postcss/lib/lazy-result.js:254:14
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tailwind-react-demo@0.1.0 watch:css: `postcss src/assets/tailwind.css -o src/assets/main.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tailwind-react-demo@0.1.0 watch:css …推荐指数
解决办法
查看次数
故事书-顺风。我应该如何将顺风添加到故事书中
我想在故事书中添加顺风。这样 Stories 就会像在 Web 上一样呈现。
我曾经create-react-app project-name --template typescript创建过这个项目。
然后为了安装tailwind，我遵循了tailwind 文档中的https://tailwindcss.com/docs/guides/create-react-app指令。
完成后，我运行了代码npm sb init。这确保了故事书的运行。
现在我需要告诉 storybook 使用 tailwindcss 进行样式设置。但我不知道如何。
我看到的每个其他答案都告诉编辑postcss.config.js文件。
但我遵循了这个https://tailwindcss.com/docs/guides/create-react-app文档，我什至不必创建 postcss.config.js 文件。所以我很困惑现在该怎么办。
为了清楚起见，我将在下面包含一些配置文件。
craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
.storybook/preview.js
import "../src/index.css"
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
}
.storybook/main.js
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app"
]
} …推荐指数
解决办法
查看次数
Tailwindcss：底部的固定/粘性页脚
我使用 tailwindCSS 并遇到制作页脚的问题。
基本文件
<body>
{% include "partials/nav.html" %}
{% block content %}
{% endblock %}
{% include "partials/footer.html" %}
</body>
页脚.html
<footer class="w-full h-64 bg-gray-900 static bottom-0">
{% load static %}
<img src="{% static "images/logo_white.png" %}" width="70px"> <p class="text-white"> ©~~~~~~</p>
</footer>
我尝试了静态、绝对、固定、相对...但是 .fixed 覆盖了内容块，并且相对使页脚向上。或 .mb-0、.bottom-0 不起作用。
是否可以将页脚固定在底部？
推荐指数
解决办法
查看次数
Tailwind grid_template_columns
Tailwind 中如何设置各个列的宽度？
例如在普通 CSS 中我会
.grid-container {
display: grid;
grid-template-columns: 20% 80%;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
但是，在 Tailwind 中，如果将宽度应用于列，则会破坏网格。
推荐指数
解决办法
查看次数
如何在 tailwindcss 中使用模板文字来动态更改类？
我尝试用这行代码更改它，但它不起作用
const [click, setClick] = useState(false);
const closeNav = () => {
setClick(!click);
};
const openNav = () => {
setClick(!click);
};
<div
className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full }
transform z-400 h-screen w-1/4 bg-blue-300 "
>
<XIcon onClick={closeNav} className=" absolute h-8 w-8 right-0 " />
</div>;
推荐指数
解决办法
查看次数
使用 Tailwind CSS 创建包含文本的水平线 (HR) 分隔线
我想<hr>使用 Tailwind CSS 创建一个分隔线，但我想在中间添加一些文本，而不是跨越整个页面宽度的水平线。
例如：
----------------------------------- Continue -----------------------------
我在文档中找不到类似的内容。我怎样才能达到这个效果？
如有必要，我可以将 HTML 更改为元素以外的内容<hr>。这只是我知道如何创建水平线的唯一方法。
推荐指数
解决办法
查看次数
Tailwind V3 导致 TypeError：无法读取未定义的属性“500”
我最近尝试将我的项目升级到 tailwind css，但收到此错误
这是我的顺风配置
module.exports = {
mode: "jit",
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: "class", // or 'media' or 'class'
theme: {
extend: {
colors: {
secondaryDark: "#171A1A",
primaryDark: "#090A0A",
neonOrange: "#FF9933",
redditRed: "#FF5700",
cardGradientPrimary: "#ff930f",
cardGradientSecondary: "#fff95b",
},
},
},
variants: {
extend: {},
},
plugins: [require("@tailwindcss/forms")],
};
推荐指数
解决办法
查看次数
顺风 h 屏幕容器（标头高度）距离屏幕底部太远
我有一个布局，其中有左侧导航、顶部导航栏，然后是子组件的主要区域。问题是所有子组件都稍微向下推过屏幕底部。
我可以通过添加 pb-36 来解决这个问题，但这会留下一个恼人的间隙。
const style = {
container: `h-screen overflow-hidden relative `,
mainContainer: `bg-gray-800 flex flex-col pl-0 w-full lg:w-[calc(100%-13rem)]`,
main: `bg-gray-100 h-screen overflow-auto lg:rounded-tl-3xl `,
};
渲染部分：
<LayoutProvider>
<div className={style.container}>
<div className="flex items-start">
<Overlay />
<SideNavigation mobilePosition="left" />
<div className={style.mainContainer}>
<TopNavigation />
<main className={style.main}>{children}</main>
</div>
</div>
</div>
</LayoutProvider>
例如，如果我删除上面的 TopNavigation，那么它将删除标题，然后子组件将正确适合。因此子组件会向下偏移那么多。
顶部导航是：
<header className="bg-gray-800 h-[74px] items-center relative w-full ">
推荐指数
解决办法
查看次数
如何使用 Tailwind CSS 创建多个主题？
查看 Tailwind CSS，似乎您需要在类中指定特定颜色，如下所示：
<div class="bg-yellow-200 dark:bg-gray-800"></div>
但是，如果我想在我的 Web 应用程序中提供 10 个不同的主题供用户选择，该怎么办？就像我可能有诸如halloween“summer和winter”party之类的主题。
我知道使用常规 CSS 可以很容易地做到这一点，如下所示：
[data-theme="halloween"] {
--color-bg: #000;
--color-body: #757981;
}
<body data-theme="halloween"></div>
然后使用 Javascript 我可以更改 data-theme 属性，主题也会改变。
但是我怎样才能用 Tailwind CSS 做到这一点呢？我在文档中找不到与此相关的任何内容。
推荐指数
解决办法
查看次数
标签 统计
tailwind-css ×10
reactjs ×6
css ×4
html ×2
next.js ×2
django ×1
javascript ×1
storybook ×1
templates ×1
typescript ×1
webpack ×1