问题标签 [tailwind-in-js]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
175 浏览

svelte - 如何让 tw-in-js/twind 插件在 Svelte 中工作

我在 Svelte 中使用 tw-in-js/twind。当使用 Svelte App 的 vanilla 设置并包含 Twind 后,我找不到任何方法让插件工作:

在上面的代码示例中,h1style2(const 声明)有效,但插件 h1style 无效。

如果有人可以让这个工作,我将不胜感激。

0 投票
1 回答
615 浏览

reactjs - 到达断点时如何从 JS 重置 Tailwind 移动菜单

Tailwind UI的免费堆叠应用程序外壳有一个移动菜单,用户可以在小屏幕上显示:

在 React 中,我使用showMobileMenu状态变量实现了这一点:

如果用户调整窗口大小(在菜单可见时),它会在 处消失medium并在重新调整回small. 在这种情况下,我希望在调整回small.

实现这一目标的最佳方法是什么?

我目前的解决方案是监听window resize事件并showMobileMenu=false随时设置window.innerWidth >= 768

我有点厌倦了由 JS 和 CSS 管理的响应行为,但也许这是典型的。只是想知道 React Tailwind 开发人员是否会以不同的方式处理这个问题。

0 投票
1 回答
639 浏览

flexbox - 当反向顺序在 Tailwind 中有断点时,子间距不起作用

flex-row我有一个登录页面,它使用和在图像和文本块之间交替flex-row-reverse

在此处输入图像描述

我可以通过在映射列表时翻转顺序来非常简单地实现这一点,而无需更改 div 的顺序:

当我意识到在移动设备上我希望它们像这样堆叠时,问题就出现了:

在此处输入图像描述

我模拟了代码沙箱中发生的事情,如下所示:

移动版本看起来和预期的一样,但更大的断点看起来好像space-x-reverse正在被识别:

在此处输入图像描述

知道如何识别反向行space-x-reverse吗?

0 投票
1 回答
1951 浏览

tailwind-css - TailwindCSS bg-opacity 在 React 中不起作用

我正在尝试使用 设置我的登录部分的背景不透明度bg-opacity-75,但是当我将它添加到我的类名时,背景颜色将消失。如果我使用opacity-75,所有 child-div 都将是透明的,如果我使用opacity-100,背景颜色将消失,只有输入字段可见,有点连线。此外,我正在使用tailwind.config带有 tailwind v2.0.2 的默认文件。

这是我的代码:

我也尝试过内联css,但仍然无法正常工作。 使用bg-opacity-75(输入后面应该有一个白色透明区域)

0 投票
4 回答
8597 浏览

css - TailwindCSS 在生产与开发中缺少颜色 - Laravel Jetstream

我正在使用 Laravel Jetstream 和 TailwindCSS。我已经根据我对项目的一些要求修改了一些 config.js 文件(webpack、tailwind 等)。出于某种原因,当我编译运行时npm run dev,它将配置所有颜色(例如,,,bg-red-100... ) bg-red-200bg-red-300但是当我在生产中编译时(npm run production),它缺少一些(,,,bg-red-100... bg-red-400bg-red-500

webpack.mix.js

webpack.config.js

tailwind.config.js

当我运行时,npm run development我得到以下 CSS 颜色(以红色为例):

当我运行时,npm run production我得到以下 CSS 文件(以红色为例):

什么可能导致此问题?我需要配置颜色,因为我正在使用它们让客户自定义他们的界面。

0 投票
1 回答
842 浏览

css - 如何在 Angular 11.2.0 或更低版本中设置 TailwindCSS

如您所知,Tailwind 是一个非常流行的 PostCSS 解决方案。我想在运行版本 11.2.0 或旧版本的 Angular 应用程序中添加 TailwindCSS。我该怎么做?

我决定发布并回答我自己的问题,因为这是我最近通过 Angular 社区看到的一个非常受欢迎的问题

0 投票
0 回答
177 浏览

css - Tailwind CSS 在构建后创建 4 mb 文件

我添加了清除,在构建后仍然发布 css,它正在抓取整个文件,而不仅仅是我使用过的库。

包.json

},

tailwind.config.js

postcss.config.js

0 投票
2 回答
1156 浏览

css - Tailwind 自定义颜色在悬停时无效

我修改了我tailwind.config.js的添加新的自定义颜色:

现在我希望我的按钮在悬停时改变颜色。

但它不起作用。

有趣的是,如果我写bg-pepegray它就可以了。它唯一不起作用的地方是悬停。

0 投票
0 回答
242 浏览

vue.js - 导入顺风自定义组件

我有这个代码:

/plugins/t-alert.js

在文件中/plugins.index.js::

在文件中main.ts

运行已成功完成,但我在浏览器中出现错误:Uncaught TypeError: Vue__default.default.extend is not a function。你对这个问题有想法吗?提前谢谢,对不起我的英语。

0 投票
1 回答
304 浏览

tailwind-css - 仅在顶部/底部/左侧/右侧启用悬停

我正在尝试在 Tailwind 文件配置中创建一个变体。我想要的是类似hover:border-l-4 hover:border-green-400, 所以一个在左侧(或仅在顶部/底部/右侧)启用边框的类。

所以我在里面创建了这个tailwind.config.js

它不起作用。我明白了TypeError: variantsValue is not iterable

我在文档页面中没有发现任何有用的东西。