32
4
I'm trying to build a web app on Next JS with Tailwind UI provided React components. Tailwind UI is using headless ui behind the scenes.
我正在尝试建立一个下一个JS与尾风用户界面提供的反应组件的网络应用程序。顺风用户界面是在幕后使用无头用户界面。
By default, Next JS will build server side components, unless you add 'use client' at the top of a page. Unfortunately, this seems to be a requirement instead of an option in case of Tailwind UI provided code, otherwise it will throw an error like this on the picture.
默认情况下，Next JS将构建服务器端组件，除非您在页面顶部添加“使用客户端”。不幸的是，这似乎是必需的，而不是在TailWind UI提供代码的情况下的选项，否则它将在图片上抛出如下所示的错误。
So the question is, how to use Tailwind UI components (to move fast with the development without being a front-end genius), but still have the option to use server components with Next JS?
因此，问题是，如何使用TailWind UI组件(在不是前端天才的情况下快速推进开发)，同时仍然可以选择将服务器组件与Next JS一起使用？
Tried using Tailwind UI components without 'use client', but they throw an error. Only solution is to add 'use client' at the top of the .tsx (or .jsx) file.
已尝试在不使用客户端的情况下使用TailWind UI组件，但引发错误。唯一的解决方案是在.tsx(或.jsx)文件的顶部添加‘Use Client’。
You do everything right, this is the Next.js problem. I just wrote a broad explanation of this behaviour. Please see
https://stackoverflow.com/a/77077564/9047572
你做的每件事都是正确的，这就是Next.js的问题。我刚刚写了一篇关于这一行为的广泛解释。请参阅https://stackoverflow.com/a/77077564/9047572
TL:DR: you need that 'use client' directive to use client-only features. Once the component became client-side, its nested components are client-side too. No way to change or intercept this behavior.
TL：DR：您需要‘Use Client’指令才能使用仅限客户端的功能。一旦组件成为客户端，它的嵌套组件也是客户端。无法改变或拦截这种行为。
And TailwindCSS use some client-only features. Your error tells the same. It tells that headlessui.esm.js is a client-only component, so you can use this library in client-side components only.
Tailwincss使用一些仅限客户端的功能。你的错误也说明了这一点。它告诉我们，headlessui.esm.js是一个仅限客户端的组件，因此您只能在客户端组件中使用该库。
"Headless" doesn't mean it doesn't use some client-only bindings :)
“Headless”并不意味着它不使用某些仅限客户端的绑定：)
P.S. Short list of "client-only" features. Basically Nextjs will show you them in its errors, but anyway...
附注：“仅限客户端”功能的简短列表。基本上，Nextjs会在它的错误中向你展示它们，但无论如何...
个人中心
文章发布
退出react-dom, cause there is no possibility of DOM manipulation on the server sideYou better read the docs here
你最好读一下这里的文件
P.P.S. Looks like there is another directory 'use server', which I didn't know of 2 days ago. Worth checking.
另外，好像还有另外一个目录‘USE SERVER’，2天前我还不知道呢。值得一查。
Thanks a lot! Can I ask you to edit your answer and a brief list of those "client-only" features? I'm a senior engineer but quite noob when it comes to front-end, especially React and NextJS. I would use your list to research the docs, and research the headlessui files themselves, so that I can use the components more consciously, especially when building out their hierarchy
非常感谢!我可以要求您编辑您的答案和那些“仅限客户端”功能的简短列表吗？我是一名高级工程师，但在前端，特别是Reaction和NextJS方面，我相当新手。我会使用您的列表来研究文档，并研究HeadlesSui文件本身，这样我就可以更有意识地使用这些组件，特别是在构建它们的层次结构时
32
4
0
我想将颜色变量(默认或扩展)用于我的扩展主题，例如: module.exports = { content: ['./index.html', './src/**/*.{js,ts,jsx,t
我们如何在 Tailwind 中设置单个列的宽度？ 例如在 Vanilla CSS 我会 .grid-container { display: grid; grid-template-colu
我是 Tailwind CSS 的新手。我在构建 React 项目时遇到了这个错误: The hover: class does not exist. If hover: is a custom cl
为什么 tailwind 中没有太多的百分比单位，例如我想要 50% 的宽度。我知道我可以向它添加自定义配置，但我只是想知道是否有任何特定原因。 最佳答案 我会说这更像是一种个人偏好的编码风格。使用后
我正在尝试将项目对齐到屏幕右侧并使其粘滞。 但正如你在这个 sandbox 中看到的那样它不起作用。 未应用正确的属性。 我该怎么办？ 最佳答案 这也行 hossein 关于tailwind-
是否可以在 tailwind 配置中使颜色动态化。 我想从后端通过 api 接收所需的(primary，accent)颜色。 因此用户可以从管理面板更改颜色。 我想从 api 获取这个十六进制值 最佳
我正在尝试使用顺风基于系统默认值启用暗模式。 为此，我使用了插件: Tailwind dark mode 。 我的顺风配置失败如下: defaultTheme = require('tailwindc
我有几个消息框，每个框都有一个数据作者属性。 如果我想在 CSS 中对这些消息框应用样式，我可以这样做: [data-author="Ben"] { background-color: blue;
没有错误，但 Tailwind 没有应用任何样式: 包.json "dependencies": { "tailwindcss": "npm:@tailwindcss/postcss7-com
我想要transition-transform 和transition-shadow，既不是transition-all 也不是只有一个。把这两个不影响，我找不到它的文档，我尝试像这样玩:transi
我正在尝试使用 webpack 5 和 tailwind 2。日志表明大多数事情都设置正确，但没有进行清除。 我跑 NODE_ENV=production webpack --config webpa
我正在尝试 extend使用他们的 tailwind.config.js 的 tailwind css 调色板文件。我的目标是创建一组主要和次要颜色，我可以在设计我的网站时使用它们。我想通过从默认的顺
我一直在使用带有“清除”选项的 Tailwind 来使最终的 css 文件更小且成功。但是，我一直想知道我的方法的效率。我正在处理有很多子文件夹的项目，我都指定如下: purge: {
你如何在 Tailwind 中设置整页背景？ 我可以看到使用的唯一属性是 h-screen ，但是当我调整浏览器大小时这不起作用。 这是我的代码: 完整的 html 示例:
将顺风 CSS 包含在我不希望它全局应用的系统中时，我找不到一个很好的方法来确定适用于自定义构建选项的范围。 基本上我想这样做: .tailwind{ @import "tailwindcss
我正在学习 Tailwind CSS。据我了解，如果您想设置元素的样式，请向其添加 Tailwind 实用程序 css 类。想给多个相似元素设置样式怎么办？例如，我有以下 HTML 片段:
我正在学习 Tailwind CSS。据我了解，如果您想设置元素的样式，请向其添加 Tailwind 实用程序 css 类。想给多个相似元素设置样式怎么办？例如，我有以下 HTML 片段:
我需要将所有具有相应响应尺寸的边距值列入白名单。 例子: 'mb-10' 'md:mb-10' 'xl:mb-10' 等等。 这是我现在在我的 tailwind.config.js 中的内容，但它似乎
我一直在尝试使用 Tailwind 来自定义 Quasar 组件，但 Quasar CSS 已经覆盖了大部分 Tailwind CSS。 我在我的 tailwind.config.js 中添加了一个前
我必须并排放置两列。这些列之一具有固定宽度。我真的很想理解为什么一列中的固定宽度在 Tailwind CSS flexbox 上不起作用。 我有以下代码: This title pushed
我是一名优秀的程序员,十分优秀！