标签: tailwind-css

我有一个 next.js 应用程序，它使用 DaisyUI，它是一个基于 tailwind 的 css 组件库。问题是我无法让任何 DaisyUI 导航栏在整个网页上水平延伸。导航栏组件垂直堆积在页面左侧。
\n

这就是它应该看起来的样子
\n

因此，我将 DaisyUI 示例中的 JSX 代码复制到我的 next.js 应用程序的布局中，但正如您从第一张图片中看到的那样，它不起作用。

这是我的应用程序中的相关代码：“_app.tsx”

import \'../styles/globals.css\'\nimport type { AppProps } from \'next/app\'\nimport Layout from \'../components/Layout\'\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    <Layout>\n      <Component {...pageProps} />\n    </Layout>\n  )\n}\n\nexport default MyApp\n

“索引.tsx”

import type { NextPage } from \'next\'\nimport { useState } from \'react\'\nimport styles from \'../styles/Home.module.css\'\n\nconst Home: NextPage = () => {\n  return (\n    <div className="hero …

我正在使用 Tailwind CSS 来制作网格。在父 div 中，我使用类space-x-1并space-y-1自动对齐子 div。

除了第一个元素稍微未对齐之外，这种方法效果很好。第一个元素的计算边距为 0，而其他每个元素的计算边距为 4px。当我从父 div 中删除space-x-1和时space-y-1，子 div 具有相同的边距。

<!-- Tailwind 3 -->
<script src="https://cdn.tailwindcss.com"></script>


<!-- Body -->
<div class="grid grid-cols-5 space-x-1 space-y-1">
  <div class="text-white text-center p-2 bg-green-700">wood 1</div>
  <div class="text-white text-center p-2 bg-gray-700">ore 2</div>
  <div class="text-white text-center p-2 bg-green-700">wood 3</div>
  <div class="text-white text-center p-2 bg-purple-800">sheep 4</div>
  <div class="text-white text-center p-2 bg-yellow-500">wheat 5</div>
  <div class="text-white text-center p-2 bg-yellow-900">brick 6</div>
  <div class="text-white text-center p-2 bg-pink-700">desert 7</div>
  <div class="text-white …

以与黑暗模式相同的方式为 Tailwind 添加自己的主题的最佳方法是什么？

该类dark包含在 HTML 标记中，表示页面现在处于深色模式，并且我们dark:在定义类以在该模式下设置样式时使用选择器。

我的问题 - 我们如何向 HTML 标签添加额外的类，并在样式中使用额外的自定义选择器来设置该特定变体的样式？

我已经阅读了 Tailwind 官方网站上的一些插件和变体文档，但不太清楚这里的正确方法是什么。

将新的前端堆栈（Vue3、Tailwind CSS）引入到已经建立的应用程序中。

旧堆栈具有依赖项，其中包括与 Tailwind 冲突的 CSS 类。

最终目标是仅使用Vue 和 TailwindCSS，所以我不想在开发过程中使用前缀，因为它没有必要......但我需要支持旧的和新的堆栈，直到我能够完全删除旧的CSS。

我知道在 TW 配置 ( prefix: 'tw-',) 中使用了 prefix 属性，但这意味着源 .vue 文件将需要使用该前缀。

我是否可以仅在构建期间（使用 Vite）告诉 Vue 向所有类添加前缀，然后同样在构建期间将规则传递给 Tailwind 仅添加前缀（但在开发期间不需要）？

我看到一个类似的问题，其中的答案提到如果TW中存在这种情况，那么TW如何知道哪些要转换，哪些不转换...我理解这一点，但在我的场景中我没有其他插件。

我简单浏览了一下postcss-prefixer，但不确定这是否是我需要的......

我想我可以使用 TW 前缀，因为它不是世界末日，但对我的最终目标来说感觉很脏......

我正在使用带有 Tailwind 和 Typography 的 Jekyll 模板，并且我有兴趣覆盖每行默认的最大宽度 65ch 限制。

默认设置是max-w-prose，我尝试将 和max-w-none一起设置为父元素prose，但它似乎不起作用（尽管它与对齐方式混淆）。我也尝试过在每个元素中设置max-w-nonewith prose（警惕不必要的覆盖到 65ch），但这也没有削减它。

我认为这可以通过 tailwind.config.js 文件来完成，例如：

  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'prose': {
              'max-width': '100ch'
            },
            'max-w-prose': {
              'max-width': '100ch'
            },
        ...

但我不明白。任何提示都非常受欢迎！

我有一个反应标题，我希望当滚动条位置初始（0）时没有阴影，并且在滚动时有阴影。以下是使用 tailwindCSS 的带阴影和不带阴影的标头代码：

有阴影：

<header className="sticky left-0 top-0 right-0 z-20 shadow">
...
</header>

没有阴影：

<header className="sticky left-0 top-0 right-0 z-20">
...
</header>

如何检查滚动条是否不在其初始位置以使标题采用 className“shadow”？

我的网站 React 工作正常，但我正在尝试修复此控制台错误。每次点击都会产生这样的结果：

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at Array.<anonymous> (content.js:7:89199)
    at c.trigger (content.js:7:81786)
    at HTMLDocument.<anonymous> (content.js:7:81253)

无论在网站的哪个位置。

我尝试删除组件并查看它是否来自特定的内容，但最终删除了整个 app.js 内容，但它仍然在发生。

知道要寻找什么吗？

我正在使用 React + Vite + Typescript + Tailwind

我的 main.tsx

import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { AxiosInterceptor } from "./interceptors/axios.interceptor";

AxiosInterceptor();

const root = ReactDOM.createRoot(document.getElementById("root")!)!;
root.render(<App />);

我的应用程序.tsx

import { BrowserRouter as Router, Route, Navigate } from "react-router-dom";
import Landing from "./pages/landing/Landing";
import Sidebar from "./components/Sidebar/Sidebar";
import Footer …

CSS 函数如何clamp()与 TailwindCSS 一起使用以fontSize在最小值和最大值之间进行线性缩放？

对与 Next.js 集成特别感兴趣。