问题标签 [tachyons-css]

我正在为我的网络应用程序使用 Tachyons CSS，我需要为中等屏幕添加宽度为 45% 的宽度 css 属性。我做到了npm install tachyons-custom，我不知道下一步该做什么。我在网上找不到任何关于添加新的 tachyons 属性的教程。

谁能给我一个小指南？谢谢你。

我想创建一个这样的布局：

我想使用 React 和Flex。

为此，我正在使用Tachyons，它的媒体查询是：

• ns=不小-> @media screen and (min-width: 30em) = [0, 30em]
• m =中等 -> @media screen and (min-width: 30em) and (max-width: 60em)= [30em, 60em]
• l =大 -> @media screen and (min-width: 60em) = [60em, ∞]

布局必须是响应式的。基本上，布局由两列（在桌面上）或两行（在移动/平板电脑上）组成。第一次有单列/行（灰色的），当用户单击它时，会出现第二列/行。

这就是我尝试的。

如您所见，在桌面上效果很好，我有两列。在手机/平板电脑上它不起作用：

那么，如何改变布局onClick事件呢？

我正在开发一个使用 Django、一些 JavaScript 和 Tachyons 的项目。我在模板文件中有以下内容：

我正在从 alarm_list 访问元素警报，并使用模板“if”插入 JavaScript 代码，告诉 HTML 元素删除当前背景颜色并添加另一种。我不乐意使用 alarmValeElementList{{ alarm.id }} 作为动态变量名，但我想不出另一种方法来做到这一点。

有没有更好的方法来实现这一点？

预计到达时间：

我认为这看起来更好，因为它摆脱了动态变量名称：

但是，我想知道是否没有更好的方法可以做到这一点？

我正在使用 Create-React-App 编写一个小型 React 应用程序。对于简单的样式调整，我使用 tachyons-css。由于频繁出现的 CSS 样式问题，我最近从经典 CSS 样式切换到 CSS 模块（对于 SCSS 也是有效问题）。现在我想知道是否有一种方法仍然可以同时使用 CSS 模块和 tachyons 样式 - 即使不再可能只向 CSS 模块样式对象添加一个额外的“经典”类名。

在使用 CSS 模块之前，我曾经通过拥有多个类名来定义一个类和 tachyons 样式（在本例中为 padding5）。例如：

使用 CSS 模块时，CSS 类定义现在看起来像这样：

现在如何将这种语法与之前使用的 tachyons 样式结合起来？有这样的东西可以工作吗？：

非常感谢！

2019 年 9 月 5 日更新：

clsx包正是我想要实现的。安装 clsx 后

然后可以使用 clsx 对 ExampleComponent 进行样式设置，如下所示：

20 年 5 月 17 日更新：

正如 Sandip 指出的那样，ClassNames 包和 clsx 包可以用来实现相同的行为。这两个软件包的每周下载量甚至表明 ClassNames 的使用频率比 CLSX 高得多（截至 2020 年 5 月 17 日，每周下载量约为 5.2 mio 与约 1.6 mio）。github 上的这个链接讨论了两个包之间的性能差异。

我正在做我第一个笨拙的步骤来建立一个博客（与 Hugo，通过 blogdown / R）并与我的浮动目录作斗争。经过长时间的反复试验，我已经能够设置它，但是，在使用移动设备时我无法隐藏目录。

该网站的样式是通过tachyons.io / css进行的，到目前为止，我认为我必须设置“浮动正确，而不是小”（fl-ns）（请参阅此处）。不幸的是，这无济于事，我不知道如何进行。

这是定义目录的代码：

这是 style.css 文件中的相关部分：

整个博客的代码在这里可见。

我知道这是一个长镜头，但如果有人有想法 - 非常感谢！

我有以下布局：

它使用 tachyons 内联 css 来创建基本的表单布局。但是，我最终得到以下用户界面：

填充似乎不适用于标题input字段，但确实适用于该textarea字段。当我将input标签更改为textarea标签时，填充适用，但问题是这似乎是一个临时修复。难道我做错了什么？

.grow这是Tachyons CSS中类的 css 属性。

它似乎遵循正确缩放悬停的最佳实践。

缩放动画在 Firefox 和 Safari 中看起来不错，但在 chrome 上看起来非常模糊。

知道如何解决这个问题吗？

如果我使用http://package.elm-lang.org/packages/justgage/tachyons-elm/1.0.0/Tachyons，我还需要使用像 Bootstrap 或 MDL 这样的 UI 框架吗？还是我只需要 UI 的 Tachyons？

使用tachyons css 库：

我不明白ns断点是如何工作的。根据文档，断点定义为：

认为以下代码将根据宽度确保仅单个 div 的可见性。

但是，断点ns也似乎在断点处开始。mediumlarge

移动断点，默认

ns 和 medium，都开始了

ns 和 large，都可见

是不是因为ns断点没有指定上限，所以覆盖了任何非移动的东西？