问题标签 [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.
svelte - 如何让 tw-in-js/twind 插件在 Svelte 中工作
我在 Svelte 中使用 tw-in-js/twind。当使用 Svelte App 的 vanilla 设置并包含 Twind 后,我找不到任何方法让插件工作:
在上面的代码示例中,h1style2(const 声明)有效,但插件 h1style 无效。
如果有人可以让这个工作,我将不胜感激。
reactjs - 到达断点时如何从 JS 重置 Tailwind 移动菜单
Tailwind UI的免费堆叠应用程序外壳有一个移动菜单,用户可以在小屏幕上显示:
在 React 中,我使用showMobileMenu
状态变量实现了这一点:
如果用户调整窗口大小(在菜单可见时),它会在 处消失medium
并在重新调整回small
. 在这种情况下,我希望在调整回small
.
实现这一目标的最佳方法是什么?
我目前的解决方案是监听window
resize
事件并showMobileMenu=false
随时设置window.innerWidth >= 768
。
我有点厌倦了由 JS 和 CSS 管理的响应行为,但也许这是典型的。只是想知道 React Tailwind 开发人员是否会以不同的方式处理这个问题。
flexbox - 当反向顺序在 Tailwind 中有断点时,子间距不起作用
flex-row
我有一个登录页面,它使用和在图像和文本块之间交替flex-row-reverse
:
我可以通过在映射列表时翻转顺序来非常简单地实现这一点,而无需更改 div 的顺序:
当我意识到在移动设备上我希望它们像这样堆叠时,问题就出现了:
我模拟了代码沙箱中发生的事情,如下所示:
移动版本看起来和预期的一样,但更大的断点看起来好像space-x-reverse
正在被识别:
知道如何识别反向行space-x-reverse
吗?
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
(输入后面应该有一个白色透明区域)
css - TailwindCSS 在生产与开发中缺少颜色 - Laravel Jetstream
我正在使用 Laravel Jetstream 和 TailwindCSS。我已经根据我对项目的一些要求修改了一些 config.js 文件(webpack、tailwind 等)。出于某种原因,当我编译运行时npm run dev
,它将配置所有颜色(例如,,,bg-red-100
... ) bg-red-200
,bg-red-300
但是当我在生产中编译时(npm run production
),它缺少一些(,,,bg-red-100
... bg-red-400
)bg-red-500
。
webpack.mix.js
:
webpack.config.js
:
tailwind.config.js
:
当我运行时,npm run development
我得到以下 CSS 颜色(以红色为例):
当我运行时,npm run production
我得到以下 CSS 文件(以红色为例):
什么可能导致此问题?我需要配置颜色,因为我正在使用它们让客户自定义他们的界面。
css - 如何在 Angular 11.2.0 或更低版本中设置 TailwindCSS
如您所知,Tailwind 是一个非常流行的 PostCSS 解决方案。我想在运行版本 11.2.0 或旧版本的 Angular 应用程序中添加 TailwindCSS。我该怎么做?
我决定发布并回答我自己的问题,因为这是我最近通过 Angular 社区看到的一个非常受欢迎的问题
css - Tailwind CSS 在构建后创建 4 mb 文件
我添加了清除,在构建后仍然发布 css,它正在抓取整个文件,而不仅仅是我使用过的库。
包.json
},
tailwind.config.js
postcss.config.js
css - Tailwind 自定义颜色在悬停时无效
我修改了我tailwind.config.js
的添加新的自定义颜色:
现在我希望我的按钮在悬停时改变颜色。
但它不起作用。
有趣的是,如果我写bg-pepegray
它就可以了。它唯一不起作用的地方是悬停。
vue.js - 导入顺风自定义组件
我有这个代码:
/plugins/t-alert.js
:
在文件中/plugins.index.js
::
在文件中main.ts
:
运行已成功完成,但我在浏览器中出现错误:Uncaught TypeError: Vue__default.default.extend is not a function
。你对这个问题有想法吗?提前谢谢,对不起我的英语。
tailwind-css - 仅在顶部/底部/左侧/右侧启用悬停
我正在尝试在 Tailwind 文件配置中创建一个变体。我想要的是类似hover:border-l-4 hover:border-green-400
, 所以一个在左侧(或仅在顶部/底部/右侧)启用边框的类。
所以我在里面创建了这个tailwind.config.js
:
它不起作用。我明白了TypeError: variantsValue is not iterable
。
我在文档页面中没有发现任何有用的东西。