Perguntas[css](coding)

Estou tentando definir uma variante de cor com hsl()uma função css dentro @themeda diretiva Tailwind 4, mas isso não se aplica:

@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));
}

As variantes de cores mais escuras e mais claras são exatamente as mesmas que as originais.

Dei uma olhada em algumas respostas existentes, como como usar hsl-custom-color-in-tailwind-in-react, mas todas elas disseram para usar tailwind.config.js, mas o Tailwind 4 agora tem uma zero-configabordagem, então eu queria saber como posso obter minhas variações de cores diretamente no arquivo css?

Em uma linha de grade com três trilhas, gostaria que as trilhas esquerda e direita tivessem exatamente o mesmo tamanho, respeitando o maior conteúdo mínimo entre as duas, e que a trilha do meio ocupasse o espaço restante, independentemente do tamanho do seu conteúdo. O HTML+CSS a seguir ilustra o problema:

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;descreve bem o que eu quero alcançar, mas não funciona. Em vez disso, como 1fré essencialmente equivalente ao minmax(auto, 1fr)que outros já observaram em outros lugares, as trilhas de borda são reduzidas a 0 de largura e a trilha do meio ocupará todo o espaço. Algo como grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);produz um resultado um pouco melhor, mas também não é o que eu quero, porque reduzirá as bordas para min-content, o que é diferente para cada uma delas, ou seja, elas não terão a mesma largura.

Ao criar um layout para um aplicativo web usando grade, tenho uma barra lateral que quero que seja tão larga quanto necessário para acomodar seu conteúdo (portanto, max-content), MAS não quero que ela fique muito grande, digamos, não mais do que 20% da janela de visualização (portanto, 20vw).

Pensei em usar algo tão simples como:

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

Mas o Firefox me informa que grid-template-columnstem um valor incorreto e, portanto, é ignorado. Se eu simplesmente usar:

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

Então funciona, mas não tenho a salvaguarda necessária para evitar uma barra lateral muito grande.

Palavras-chave como min-contente max-contentnão são permitidas em funções CSS?

Qual seria outra maneira de atingir meu objetivo aqui?

Estou tentando criar uma propriedade de estilo CSS personalizada para meu componente, com vários valores de cor, como -fx-background-color. Mas estou travado, pois, apesar de definir minha propriedade CSS de forma semelhante à propriedade -fx-background-color, apenas o primeiro valor de cor é analisado da declaração CSS. Esta é a declaração CSS:

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

E esta é a declaração CssMetadata na classe java:

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 } );

no getCssMetaData eu também retorno essa propriedade e ela também é analisada, mas em vez de uma sequência de pintura, ela é analisada apenas como um único valor de cor.

Também recebo um aviso ao processar a propriedade 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

Qualquer conselho sobre como criar uma propriedade CSS é bem-vindo. Tentei pesquisar no Google e também usar o Perplexity para obter informações sobre esse problema, mas não encontrei nada útil para resolvê-lo.

Obrigado!

Quero ter uma galeria de imagens com miniaturas onde cada imagem mantenha sua proporção e cada linha da galeria ocupe largura total. A única maneira de conseguir isso parece ser:

• selecione o número de imagens que caberão na linha em uma altura normal
• aumentar a altura das imagens na linha até que ela tenha largura total.

É possível criar esse layout apenas via CSS? Tenho quase certeza de que a resposta é "não", mas só queria verificar, pois imagino que seja um problema muito comum (tanto o OneDrive quanto o Google Fotos parecem fazer isso por meio de cálculos manuais). As abordagens de CSS que me vêm à mente incluem usar uma caixa flexível (ou grade) e ter espaço extra ou aumentar/recortar a imagem para preencher o espaço.

.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>

Estou tentando criar este layout, mas há um problema quando quero deixar a margem inferior abaixo do elemento vermelho .up. Quando uso a propriedade calc, a altura não está correta, o que faz com que o elemento rosa suba um pouco em vez de ficar na mesma altura do elemento azul.

.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>

Eu tentei o mesmo recurso na largura com os mesmos valores e funcionou e consegui o que queria, mas não funcionou na altura, por quê??

De acordo com a descrição no modelo de formatação visual CSS

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = largura do bloco que o contém

Quando margine widthnão são nenhum dos dois autoe sua soma é maior que a largura do bloco que o contém, margin-rightserão ignorados e o valor será calculado de modo a tornar a igualdade verdadeira

.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>

Neste código, para "child", a largura do bloco que o contém é de 400px e a soma de ++ widthé de 500px. De acordo com a descrição, deve ser definido como 50px para que a equação seja verdadeira.margin-leftmargin-rigthmargin-right

Mas quando verifiquei no navegador, descobri que a margem direita não estava definida como 50px, mas ainda como 150px.

resultado

Estou configurando um novo projeto usando Next.js (v15.3.0 - Pages Router) e Tailwind CSS (v4.1.4) e encontrei um problema de compilação persistente em que as classes de utilitários do Tailwind não estão sendo reconhecidas.

O problema central:

O servidor de desenvolvimento Next.js ( next dev) falha ao compilar, gerando erros como:

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

Inicialmente, isso acontecia com as classes padrão do Tailwind ( bg-gray-50) usadas @applyno meu globals.css. Depois de testar configurações diferentes globals.css(como usar @import "tailwindcss/preflight"; @reference "tailwindcss/theme.css";), o erro passou para as cores do meu tema personalizado :

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

Ao tentar usar a theme()função diretamente em @layer base, recebo:

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

Basicamente, parece que o processo de construção do PostCSS/Tailwind não está reconhecendo ou aplicando nenhuma classe de utilitário do Tailwind corretamente dentro do pipeline de construção do CSS.

Versões relevantes:

• Next.js: 15.3.0 (Usando o roteador de páginas)
• Tailwind CSS: 4.1.4
• @tailwindcss/postcss: 4.1.4
• Node.js: v20.x

Arquivos de configuração:

tailwind.config.js(Tentativa simplificada):

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(Última tentativa):

/* 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;
    }
}

Etapas de solução de problemas tentadas (sem sucesso):

• Instalações limpas completas:.next , node_modulese , foram excluídos várias vezes package-lock.jsone executados novamente npm install.
• Caminhos de configuração verificados:content caminhos verificados em tailwind.config.jse baseUrlem tsconfig.json.
• Simplificado tailwind.config.js: Tentei remover theme.extende definir cores diretamente em theme.
• Cores padrão explícitas: adicionadas explicitamente gray: colors.gray, red: colors.redetc. à configuração.
• Diretivas diferentes globals.css:
  • Testei o padrão v3 @tailwind base; @tailwind components; @tailwind utilities;.
  • Testado @import "tailwindcss/preflight"; @reference "tailwindcss/theme.css"; @tailwind utilities;(isso corrigiu erros de classe padrão, mas não os personalizados ao usar @apply).
  • Testado @import "tailwindcss/preflight"; @tailwind theme; @tailwind utilities;(atual).
• @applyvs. theme(): Tentei usar cada um desses métodos dentro @layer basede globals.css. @applyfalhou primeiro, depois theme()também.
• postcss.config.jsVariações: Tentei usar tailwindcss: {}em vez de @tailwindcss/postcss: {}.

Apesar dessas etapas, a compilação falha consistentemente, incapaz de reconhecer ou processar classes de utilitários do Tailwind referenciadas em CSS (especialmente em globals.css). Classes de utilitários padrão usadas diretamente em elementos JSX (por exemplo, <div className="p-4 bg-primary-500">) também falham em aplicar estilos corretamente porque o CSS subjacente não é gerado corretamente.

Alguém já encontrou problemas semelhantes com esta pilha específica (Next.js 15 / Tailwind 4 / Pages Router)? O que pode estar causando essa falha fundamental no processamento do Tailwind na compilação do Next.js? Alguma sutileza de configuração que eu possa estar ignorando?

Agradecemos antecipadamente por qualquer informação!

Estou tentando usar uma fonte personalizada (RetroGaming.ttf) no meu projeto React usando Vite e Tailwind CSS v4, mas a fonte não está sendo aplicada. A @font-faceregra parece ser ignorada, e a classe Tailwind gerada não inclui a fonte personalizada em sua font-familypropriedade.

Pilha de tecnologia

• Estrutura: React (^19.0.0)
• Ferramenta de construção: Vite (^6.2.0)
• Estilo: Tailwind CSS (^4.1.3)
• Processamento CSS: PostCSS (^8.5.3) com autoprefixere@tailwindcss/postcss
• Arquivo de fonte: [RetroGaming.ttf]

Meta

Defina RetroGamingFontvia @font-facee aplique-o usando uma classe de utilitário Tailwind font-custom-retro.

Problema

1. A fonte personalizada não é renderizada; os elementos usam a fonte reserva.
2. O pacote CSS de produção ( dist/assets/) não possui a @font-faceregra .
3. A classe gerada .font-custom-retroinclui apenas a fonte de fallback ( sans-serif), não RetroGamingFont.
4. As ferramentas de desenvolvimento do navegador não mostram nenhum erro 404 para [/fonts/RetroGaming.ttf]
5. O problema persiste, esteja @font-faceele em src/index.cssou diretamente em index.html.

Configuração

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 (Atualmente vazio em relação a @font-face)

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

index.html (Estado atual)

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

Uso em CompatibilityForm.jsx

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

O que eu tentei

Configuração correta do Tailwind v4:

• Usando @import "tailwindcss";emsrc/index.css
• Usando @tailwindcss/postcssplugin, sem @tailwindcss/viteplugin.

@font-faceColocação:

• Testado em src/index.css(depois @import) e diretamente na index.html <style>tag.

Nenhuma das duas funcionou.

Verificação do caminho do arquivo:

• Confirmado public/fonts/RetroGaming.ttfque existe e /fonts/RetroGaming.ttfo caminho está correto para ativos públicos.

Nome da fonte:

• Simplificado para RetroGamingFont(sem espaços).

Inspeção de ferramentas de desenvolvimento:

• A classe verificada .font-custom-retroé aplicada, mas o cálculo font-familyusa o fallback.
• Nenhum erro de rede para o arquivo de fonte.

Pergunta

Por que o Tailwind CSS v4 / PostCSS / Vite não está processando ou reconhecendo a @font-faceregra corretamente, impedindo que a fonte personalizada seja incluída na font-familydefinição da classe de utilitário? Existe alguma etapa de configuração específica para fontes personalizadas com Tailwind v4 e Vite que eu esteja esquecendo?

Estou usando o Angular 19 e todo o meu estilo funciona conforme o esperado ao fazer um ng serve , mas quando eu construo o projeto, ele cria um pacote do meu css e o insere apenas para "imprimir".

Tenho isso no meu arquivo angular.json e, novamente, ele cria o pacote perfeitamente:

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

Meu arquivo index.html criado se parece com isso nas tags head que tratam do estilo:

<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>

Se eu inspecionar o HTML com o Chrome e remover o media="print" do link da folha de estilo, todo o meu CSS carrega corretamente e tudo fica bem. Caso contrário, meus estilos globais ficam bagunçados. Qualquer ajuda para que esse estilo funcione para todas as mídias seria bem-vinda, porque não sei por que ele está fazendo o que está fazendo.