问题标签 [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 投票
0 回答
64 浏览

javascript - 为什么 react.js 项目在 Tailwind CSS 的导航栏上不起作用?

顺风CSS


无论如何,我无法让这个导航栏正确折叠。我需要在响应模式下将导航栏从 flex 中更改出来,但它目前无法正常工作。


在这种情况下,当我在 vue.js 中运行此代码时,导航栏下拉菜单状态默认为打开。如何设置默认关闭状态?

0 投票
0 回答
19 浏览

toggle - 将 href 与切换 TailwindCSS 结合使用

我想发送一个请求,例如https://google.com当我们切换状态时发送一个带有切换值(true/false)的请求。我添加了 codepen 沙盒链接。谁能帮我吗?谢谢。

参考:https ://codepen.io/lhermann/pen/EBGZRZ

0 投票
2 回答
102 浏览

css - 如何使用 tailwind.config.js 修改 Tailwind CSS 库的 .container css 类断点

根据下面的截图,Tailwind css 库为默认、sm、md、lg、xl、2xl屏幕尺寸提供了 6 个断点。

在此处输入图像描述

我想要两个断点。默认情况下,.containercss 类将具有 100% 的宽度,然后当屏幕尺寸大于 1280 像素时,宽度将固定为 1280 像素。

我可以在我的 css 文件中创建 css 规则,但是,由于 Tailwind 提供tailwind.config.js文件来更改样式,我想从 js 文件中执行此操作。

如何使用文件为.containercss 类设置响应断点?tailwind.config.js

0 投票
1 回答
81 浏览

css - 在 Tailwind css 中否定条件

有一个元素列表,我想为从第二个开始的所有元素应用一种样式,并为第一个应用另一种样式。

要申请第一个它正在工作first-of-type:bg-red-500,但如何将样式应用于其他样式?

似乎这:not(first-of-type:bg-blue-500)行不通。

0 投票
3 回答
1828 浏览

tailwind-css - Why tailwind key is missing?

I don't understand why I have this issue

warn - The content key is missing or empty. Please populate the content key as Tailwind generates utilities on-demand based on the files that use them. For more information see the documentation: https://tailwindcss.com/docs/content-configuration

tailwind.config.js

0 投票
1 回答
61 浏览

css - 顺风切换输入

我有以下切换输入来自:

和切换.css:

Tailwind 中有没有办法避免使用自定义类来实现所需的样式?

0 投票
2 回答
149 浏览

javascript - Color classes of Tailwind CSS not working when appended

There is a login page that is built with Tailwind CSS v3, all the styles for nice and fine. But on the login page, I want to have timer alerts that will display if any error occurs like invalid email, email already in use like that way.

What is done: So I created a <div id="su-error-container"> in the login page just above the submit button which will be empty by default, whenever an error occurs, js creates an element and appends it to the div present with Tailwind CSS classes in it.

But the problem is, classes like padding, margin, text size and all work fine, but text-color, bg-color classes do not work. Code:-

Element copied from Dev Tools Chrome:

Other classes work, but colour classes, comment if any extra info is needed!

tailwind.config.js

0 投票
2 回答
78 浏览

css - 尾风 css 显示有关生成的 css 文件缺少样式的警告

这是我第一次安装和运行 tailwind CSS。我按照说明做了所有相应的事情,但随后它开始显示一些警告,如下所示

在此处输入图像描述

你能告诉我为什么我会收到这些警告并且无论如何要我修复它们吗?因为我担心我生成的 CSS 会丢失样式所以需要帮助来修复它

另外,我可以将顺风 CSS 保持在观看模式吗?请给我命令行或视频或向我解释解决方法?先感谢您!

0 投票
0 回答
7 浏览

tailwind-in-js - 如何将 twind 配置作为对象

我想围绕 twind 创建一个 ui 组件库。但我想保持动态。所以我想要可以用来动态生成样式的主题对象。例如,我想知道主题中的某些配置是否有令牌设计。例如,在主题配置中的 fontFamily 上是否定义了 h1。

0 投票
0 回答
24 浏览

javascript - 如何让顺风基于传入的变量构建多个文件

所以我有一个非常奇怪的用例。我需要两个顺风文件,每个文件都更改了原色。

这是一个例子。

所以这将是一个文件,另一个将交换 primaryTheme const 说这个

所以我试图在需要构建生产时,将颜色变量更改为一组预定义的颜色。

所以一个构建可能会生成两个 app.css 文件

例如,主要主题变量发生了变化。

有没有办法让我自动化这个,所以我不必每次都手动将 const 换成不同的颜色,然后更改文件名?

目前我正在通过 npx 构建,但我也可以使用 postcss

如果这样做更容易,我希望只在“构建”上生成多个文件。

非常感谢您提前提供任何提示或指导:)