问题[css](coding)

hsl()我正在尝试在 Tailwind 4指令中使用 css 函数定义颜色变体，@theme但它不适用：

@theme {
    /* Colors */
    --color-primary: #006fa0;

    /* Darken colors */
    --theme-color-primary-darken: hsl(from var(--color-primary) h s calc(l - 5));

    /* Lighten colors */
    --theme-color-primary-lighten: hsl(from var(--color-primary) h s calc(l - 5));
}

加深和变浅的颜色变体与原始颜色完全相同。

我看了一些现有的答案，例如how-to-use-hsl-custom-color-in-tailwind-in-react，但他们都说要使用tailwind.config.js，但 Tailwind 4 现在有了一种zero-config方法，所以我想知道如何直接在 css 文件中实现我的颜色变化？

在一个包含三条轨道的网格行中，我希望左右轨道大小完全相等，同时保留两者中较大的 min-content 值，并且让中间轨道占据剩余空间，无论其内容大小如何。以下 HTML+CSS 代码演示了这个问题：

nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); */
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}

<nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

grid-template-columns: 1fr auto 1fr;某种程度上很好地描述了我想要实现的目标，但却行不通。相反，正如其他人在其他地方提到的1fr那样minmax(auto, 1fr)，边缘轨道的宽度会减小到 0，而中间轨道会占据整个空间。类似于 的方法grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);虽然效果会稍微好一些，但也不是我想要的，因为它会将边缘减小到min-content，而每个边缘的宽度都不同，也就是说，它们的宽度不会相等。

使用网格为 Web 应用程序构建布局，我有一个侧边栏，我希望它足够宽以容纳其内容（所以，max-content），但我不希望它变得太大，比如说不超过视口的 20%（所以，20vw）。

我以为我会使用一些简单的东西：

.page {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: min(max-content, 20vw) 1fr;
  grid-template-areas: "side main";
}

但是 Firefox 提示我grid-template-columns值不正确，因此被忽略。如果我直接使用：

  grid-template-columns: max-content 1fr;

然后它就可以工作了，但是我没有想要避免侧边栏过大的安全措施。

CSS 函数中是否不允许使用诸如min-content和 之类的关键字？max-content

还有什么其他方法可以实现我的目标？

我尝试为我的组件创建一个自定义 CSS 样式属性，其中包含多个颜色值，例如 -fx-background-color。但是我遇到了问题，尽管我定义了类似于 -fx-background-color 属性的 CSS 属性，但只有第一个颜色值会从 CSS 声明中解析出来。以下是 CSS 声明：

.default-chart-theme {
   -jfc-default-paint-sequence: red,white,green,blue,yellow,orange,gray;
}

这是 java 类中的 CssMetadata 声明：

public final CssMetaData<StyleableChartViewer, Paint[]> DEFAULT_PAINT_SEQUENCE = new CssMetaData<>("-jfc-default-paint-sequence", PaintConverter.SequenceConverter.getInstance(), new Paint[] { Color.RED } )
    {
        @Override
        public boolean isSettable(StyleableChartViewer styleable)
        {
            return !cssDefaultPaintSequence.isBound();
        }

        @Override
        public StyleableProperty<Paint[]> getStyleableProperty(StyleableChartViewer styleable)
        {
            return cssDefaultPaintSequence;
        }
    };

    public final SimpleStyleableObjectProperty<Paint[]> cssDefaultPaintSequence =
            new SimpleStyleableObjectProperty<>(DEFAULT_PAINT_SEQUENCE, this, "cssDefaultPaintSequence", new Paint[] { Color.RED } );

在 getCssMetaData 中，我也返回了此属性，并且它也被解析，但不是绘画序列，而是仅将其解析为单个颜色值。

处理 css 属性时我也收到警告：

WARNING: Caught 'java.lang.ClassCastException: class javafx.scene.paint.Color cannot be cast to class [Ljavafx.css.ParsedValue; (javafx.scene.paint.Color and [Ljavafx.css.ParsedValue; are in unnamed module of loader 'app')' while converting value for '-jfc-default-paint-sequence' from rule '*.default-chart-theme' in stylesheet

欢迎任何关于如何创建此类 CSS 属性的建议。我尝试过 Google，也尝试过使用 Perplexity 获取一些关于此问题的信息，但没有找到任何有用的解决方法。

谢谢！

我想要一个缩略图图库，其中每张图片都保持其宽高比，并且图库的每一行都是全宽的。实现此目的的唯一方法似乎是：

• 选择适合正常高度的行的图像数量
• 增加行中图像的高度，直到行达到全宽。

是否可以仅通过 CSS 实现这种布局？我确信答案是“否”，但我只是想确认一下，因为我认为这是一个非常常见的问题（OneDrive 和 Google Photos 似乎都是通过手动计算来实现的）。我能想到的 CSS 方法包括使用弹性框（或网格）并留出额外空间，或者放大/裁剪图像以填充空间。

.root{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 500px;
  border:2px solid black;
  & div{
    border: 1px solid blue;
    height: 100px;
  }
  
  & .portrait{
    aspect-ratio: 3 / 2;
    }
  & .landscape{
    aspect-ratio: 2 / 3;
  }
}

.desired{
  & div:nth-of-type(1), div:nth-of-type(2), div:nth-of-type(3){
    height: 134px;
  }
  & div:nth-of-type(4), div:nth-of-type(5), div:nth-of-type(6){
    height: 109px;
  }
}
  

<div>
Current:
  <div class="root">
    <div class="portrait">s</div>
    <div class="landscape">w</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="landscape">w</div>
  </div>
Desired:
  <div class="root desired">
    <div class="portrait">s</div>
    <div class="landscape">w</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="landscape">w</div>
  </div>

我正在尝试设计这个布局，但当我想让 margin-bottom 位于红色 .up 元素下方时，出现了问题。当我使用 calc 属性时，高度不正确，导致粉色元素向上移动了一点，而不是与蓝色元素处于同一高度。

.parent {
  width: 500px;
  height: 300px;
  background-color: #eee;
  padding: 10px;
  margin: 50px auto;
  overflow: hidden;
}
.child-1 {
  width: calc((50% - 10px)/1);
  margin-right: 10px;
  height: 100%;
  background-color: blueviolet;
  float: left;
}
.child-2 {
  width: 50%;
  height: 100%;
  float: right;

  & .up {
    width: 100%;
    height: calc((50% - 10px)/1);
    margin-bottom: 10px;
    background-color: red;
  }

  & .down {
    width: 100%;
    height: 145px;
    background-color: pink;
  }
}

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2">
      <div class="up"></div>
      <div class="down"></div>
    </div>
  </div>

我尝试在宽度上使用相同的功能，并使用相同的值，它起作用了，我得到了我想要的，但它在高度上不起作用，为什么？

根据CSS视觉格式模型中的描述

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度

当margin和width都不是，auto并且它们的和大于包含块的宽度时，margin-right将被忽略，并计算值以使等式成立

.parent {
  background-color: #01c1ff;
  width: 400px;
  height: 400px;
  margin: auto;
}

.child {
  height: 200px;
  margin-left: 150px;
  width: 200px;
  margin-right: 150px;
  background-color: #ff01c1;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

</html>

这段代码中，对于child来说，包含块的宽度是400px，而width++的margin-left和margin-rigth是500px。根据描述，margin-right最终应该设置为50px才能使等式成立。

但是在浏览器中检查时发现margin-right并没有设置为50px，而是依然是150px。

结果

我正在使用 Next.js（v15.3.0 - Pages Router）和 Tailwind CSS（v4.1.4）设置一个新项目，但遇到了一个持续存在的构建问题，即无法识别 Tailwind 实用程序类。

核心问题：

Next.js 开发服务器（next dev）编译失败，抛出如下错误：

Error: Cannot apply unknown utility class: bg-gray-50

最初，这个问题发生在我的 中bg-gray-50使用的默认 Tailwind 类（ ）上。在尝试了不同的配置（例如使用）后，错误转移到了我的自定义主题颜色上：@applyglobals.cssglobals.css@import "tailwindcss/preflight"; @reference "tailwindcss/theme.css";

Error: Cannot apply unknown utility class: text-primary-600

theme()当尝试直接在中使用该函数时@layer base，我得到：

Error: Could not resolve value for theme function: theme(colors.gray.50).

本质上，PostCSS/Tailwind 构建过程似乎无法在 CSS 构建管道中正确识别或应用任何Tailwind 实用程序类。

相关版本：

• Next.js： 15.3.0（使用 Pages 路由器）
• Tailwind CSS： 4.1.4
• @tailwindcss/postcss： 4.1.4
• Node.js： v20.x

配置文件：

tailwind.config.js（简化尝试）：

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: { // No 'extend'
    fontFamily: {
      sans: ['Inter', ...defaultTheme.fontFamily.sans],
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray, // Explicitly included
      red: colors.red,
      green: colors.green,
      primary: { // My custom color
        DEFAULT: '#2563EB',
        // ... other shades 50-950
        600: '#2563EB',
        700: '#1D4ED8',
      },
      secondary: { /* ... custom secondary color ... */ },
    },
     ringOffsetColor: {
        DEFAULT: '#ffffff',
     },
  },
  plugins: [],
};

postcss.config.js：

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {}, // Using the v4 specific plugin
    autoprefixer: {},
  },
};

src/styles/globals.css（最新尝试）：

/* src/styles/globals.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@import "tailwindcss/preflight";
@tailwind theme;
@tailwind utilities;

@layer base {
    html {
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth;
    }

    body {
        @apply bg-gray-50 text-gray-900 antialiased;
    }

    a {
        @apply text-primary-600 hover:text-primary-700 transition-colors duration-150;
    }
}

尝试的故障排除步骤（未成功）：

• 完成全新安装：多次删除.next、node_modules并package-lock.json重新运行npm install。
• 已验证的配置路径：检查和中的content路径。tailwind.config.jsbaseUrltsconfig.json
• 简化tailwind.config.js：尝试删除theme.extend，直接在下定义颜色theme。
• 明确的默认颜色：明确添加gray: colors.gray到red: colors.red配置中等。
• 不同的globals.css指令：
  • 尝试了标准 v3 @tailwind base; @tailwind components; @tailwind utilities;。
  • 尝试过@import "tailwindcss/preflight"; @reference "tailwindcss/theme.css"; @tailwind utilities;（这修复了使用时的默认类错误但没有修复自定义错误@apply）。
  • 已尝试@import "tailwindcss/preflight"; @tailwind theme; @tailwind utilities;（当前）。
• @apply与theme()：@layer base尝试使用其中的每一种方法globals.css。@apply首先失败，然后theme()也失败。
• postcss.config.js变化：尝试使用tailwindcss: {}而不是@tailwindcss/postcss: {}。

尽管采取了这些步骤，构建仍然持续失败，无法识别或处理 CSS 中引用的 Tailwind 工具类（尤其是在 中globals.css）。直接在 JSX 元素上使用的标准工具类（例如<div className="p-4 bg-primary-500">）也无法正确应用样式，因为底层 CSS 生成不正确。

有人在这个特定的堆栈（Next.js 15 / Tailwind 4 / Pages Router）上遇到过类似的问题吗？是什么原因导致了 Next.js 构建过程中 Tailwind 的处理出现根本性故障？我可能遗漏了哪些配置细节？

提前感谢您的任何见解！

我正在尝试在我的 React 项目中使用 Vite 和 Tailwind CSS v4 自定义字体 (RetroGaming.ttf)，但该字体无法应用。该@font-face规则似乎被忽略了，生成的 Tailwind 类的属性中不包含该自定义字体font-family。

技术栈

• 框架： React（^19.0.0）
• 构建工具： Vite（^6.2.0）
• 样式： Tailwind CSS（^4.1.3）
• CSS 处理： PostCSS (^8.5.3)autoprefixer与@tailwindcss/postcss
• 字体文件： [RetroGaming.ttf]

目标

定义RetroGamingFontvia@font-face并使用 Tailwind 实用程序类应用它font-custom-retro。

问题

1. 自定义字体不会呈现；元素使用后备字体。
2. 生产的CSS包（dist/assets/）缺少@font-face规则。
3. 生成的.font-custom-retro类仅包含后备字体（sans-serif），而不是RetroGamingFont。
4. 浏览器开发工具未显示[/fonts/RetroGaming.ttf] 的404 错误
5. @font-face无论是在 中src/index.css还是直接在 中，问题仍然存在index.html。

配置

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        'custom-retro': ['RetroGamingFont', 'sans-serif'], // Font definition with fallback
      },
    },
  },
  plugins: [],
}

postcss.config.js

export default {
  plugins: {
    '@tailwindcss/postcss': {}, // Required for v4
    autoprefixer: {},
  },
}

src/index.css（目前为空@font-face）

@import "tailwindcss"; /* Tailwind v4 import, placed first */
    
/* @font-face moved to index.html for testing */

index.html（当前状态）

<!-- Inside <head> -->
<style>
  @font-face {
    font-family: 'RetroGamingFont';
    src: url('/fonts/RetroGaming.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
</style>

CompatibilityForm.jsx中的用法

<h2 className="text-2xl font-custom-retro text-pink-400">...</h2>
<label className="font-custom-retro text-indigo-200">...</label>

我尝试过的方法

正确的 Tailwind v4 设置：

• 使用@import "tailwindcss";​src/index.css
• 使用@tailwindcss/postcss插件，无需@tailwindcss/vite插件。

@font-face放置：

• src/index.css在（之后）中尝试过@import并直接在index.html <style>标签中尝试过。

两者都不起作用。

文件路径验证：

• 确认公共资产public/fonts/RetroGaming.ttf存在且/fonts/RetroGaming.ttf路径正确。

字体名称：

• 简化为RetroGamingFont（无空格）。

开发工具检查：

• 已验证的.font-custom-retro类已应用，但计算font-family使用了后备。
• 字体文件没有网络错误。

问题

为什么 Tailwind CSS v4 / PostCSS / Vite 无法正确处理或识别该@font-face规则，导致自定义字体无法包含在font-family实用程序类的定义中？我是否遗漏了 Tailwind v4 和 Vite 中自定义字体的具体配置步骤？

我正在使用 Angular 19，并且在执行ng serve时我的所有样式都按预期工作，但是当我构建项目时，它会创建一个 css 包并将其仅注入以用于“打印”。

我的 angular.json 文件中有这个，并且它再次完美地创建了包：

"styles": [
  "node_modules/font-awesome/css/font-awesome.css",
  "src/custom-theme.scss",
  "src/styles.css"
]

我构建的 index.html 文件在处理样式的 head 标签中如下所示：

<style>...all component styling...</style>
<link rel="stylesheet" href="styles-QO6MI7ZW.css" media="print" onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="styles-QO6MI7ZW.css">
</noscript>

如果我用 Chrome 检查 HTML，并从样式表链接中删除media="print"，所有 CSS 都能正确加载，一切正常。否则，我的全局样式就会被破坏。任何帮助我让这个样式在所有媒体上都能正常工作的帮助都将不胜感激，因为我不确定它为什么会这样。