Início / coding / Perguntas / 79566452
Accepted
Sabeer Waqas
Asked: 2025-04-10 19:06:18 +0800 CST

TailwindCSS v4 não seleciona classes

  • 772

Estou trabalhando em um monorepo onde tenho dois aplicativos. O primeiro é NextJS e o segundo é React.js. Atualizei recentemente a versão do Tailwind CSS para a mais recente. Mas o problema é que o meu CSS abaixo não está sendo aplicado após a atualização. Segui vários documentos e fiz algumas personalizações, mas não consegui. Você poderia dar uma olhada e me orientar?

/* 
@tailwind base;
@tailwind components;
@tailwind utilities; */

@import 'tailwindcss';

@theme {
  /* Typography */
  --h1: 'text-gray-900';
  --h2: 'text-3xl md:text-4xl font-bold text-gray-900';
  --h3: 'text-2xl md:text-3xl font-bold text-gray-900';
  --h4: 'text-xl md:text-2xl font-semibold text-gray-900';
  --h5: 'text-lg md:text-xl font-semibold text-gray-900';
  --h6: 'text-base md:text-lg font-semibold text-gray-900';
  --subtitle: 'text-xl text-gray-600';
  --body: 'text-base text-gray-700';
  --body-sm: 'text-sm text-gray-700';
  --caption: 'text-sm text-gray-500';
  --color-mint-500: oklch(0.72 0.11 178);

  /* Links */
  --link: 'text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200';
  --link-muted: 'text-gray-500 hover:text-gray-700 transition-colors duration-200';
  --link-primary: 'text-primary-500 hover:text-primary-600 font-medium transition-colors duration-200';
  --link-underline: 'text-gray-600 hover:text-primary-500 underline transition-colors duration-200';

  /* Spacing */
  --section: 'py-20';
  --container-padded: 'container mx-auto px-4';

  /* Buttons */
  --btn: 'px-6 py-3 rounded-lg font-medium transition-colors text-center inline-block';
  --btn-sm: 'px-4 py-2 rounded-lg font-medium transition-colors text-center inline-block text-sm';
  --btn-lg: 'px-8 py-4 rounded-lg font-medium transition-colors text-center inline-block text-lg';
  --btn-primary: 'bg-primary-500 text-white hover:bg-primary-600';
  --btn-secondary: 'bg-white text-primary-500 border border-primary-500 hover:bg-gray-50';
  --btn-white: 'bg-white text-primary-500 hover:bg-gray-100';
  --btn-outline: 'bg-transparent text-white border border-white hover:bg-primary-600'; /* Cards */
  --card: 'bg-white rounded-lg shadow-sm overflow-hidden';
  --card-hover: 'transition-all duration-300 hover:shadow-md';

  /* Features */
  --feature-card: 'bg-gray-50 p-8 rounded-lg';
  --feature-icon: 'text-primary-500 mb-4 h-12 w-12';

  /* Sections */
  --hero-section: 'bg-gradient-to-b from-white to-gray-50';
  --section-title-container: 'text-center mb-16';
  --cta-section: 'bg-primary-500 text-white';
}

@layer components {
  /* Typography */
  .h1 {
    @reference text-4xl md:text-5xl font-bold text-gray-900;
  }

  .h2 {
    @reference text-3xl md:text-4xl font-bold text-gray-900;
  }

  .h3 {
    @reference text-2xl md:text-3xl font-bold text-gray-900;
  }

  .h4 {
    @reference text-xl md:text-2xl font-semibold text-gray-900;
  }

  .h5 {
    @reference text-lg md:text-xl font-semibold text-gray-900;
  }

  .h6 {
    @reference text-base md:text-lg font-semibold text-gray-900;
  }

  .subtitle {
    @reference text-xl text-gray-600;
  }

  .body {
    @reference text-base text-gray-700;
  }

  .body-sm {
    @reference text-sm text-gray-700;
  }

  .caption {
    @reference text-sm text-gray-500;
  }

  /* Links */
  .link {
    @reference text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200;
  }

  .link-muted {
    @reference text-gray-500 hover:text-gray-700 transition-colors duration-200;
  }

  .link-primary {
    @reference text-primary-500 hover:text-primary-600 font-medium transition-colors duration-200;
  }

  .link-underline {
    @reference text-gray-600 hover:text-primary-500 underline transition-colors duration-200;
  }

  /* Spacing */
  .section {
    @reference py-20;
  }

  .container-padded {
    @reference container mx-auto px-4;
  }

  /* Buttons */
  .btn {
    @reference px-6 py-3 rounded-lg font-medium transition-colors text-center inline-block;
  }

  .btn-sm {
    @reference px-4 py-2 rounded-lg font-medium transition-colors text-center inline-block text-sm;
  }

  .btn-lg {
    @reference px-8 py-4 rounded-lg font-medium transition-colors text-center inline-block text-lg;
  }

  .btn-primary {
    @reference bg-primary-500 text-white hover:bg-primary-600;
  }

  .btn-secondary {
    @reference bg-white text-primary-500 border border-primary-500 hover:bg-gray-50;
  }

  .btn-white {
    @reference bg-white text-primary-500 hover:bg-gray-100;
  }

  .btn-outline {
    @reference bg-transparent text-white border border-white hover:bg-primary-600;
  }

  /* Cards */
  .card {
    @reference bg-white rounded-lg shadow-sm overflow-hidden;
  }

  .card-hover {
    @reference transition-all duration-300 hover:shadow-md;
  }

  /* Features */
  .feature-card {
    @reference bg-gray-50 p-8 rounded-lg;
  }

  .feature-icon {
    @reference text-primary-500 mb-4 h-12 w-12;
  }

  /* Sections */
  .hero-section {
    @reference bg-gradient-to-b from-white to-gray-50;
  }

  .section-title-container {
    @reference text-center mb-16;
  }

  .cta-section {
    @reference bg-primary-500 text-white;
  }
}
javascript

2 respostas

  1. Você está usando a @themediretiva incorretamente. Ela se destina principalmente a registrar novos valores em namespaces predefinidos. Você pode encontrar a lista de namespaces disponíveis aqui:

    @theme {
  --color-mint-500: oklch(0.72 0.11 178);
}

    Componentes adicionais podem ser adicionados usando a @utilitydiretiva.

    Você não pode referenciar nomes de classes com @reference; essa diretiva é destinada a casos em que você deseja usar TailwindCSS dentro de uma <style>tag em um arquivo Vue ou Svelte. Em vez disso, você pode referenciar nomes de classes usando @apply:

    /* Added custom components by utility directive */
@utility link {
  @apply text-gray-600 hover:text-primary-500 font-medium transition-colors duration-200;
}

    Exemplo com seu código

    Em @theme, você precisa declarar as cores primary-500e primary-600para que possa usá-las posteriormente como text-primary-500e text-primary-600.

    @themeé usado para definir valores, enquanto @utilityé para estilizar componentes completos.

    Você só precisa disso @referencese precisar referenciar utilitários fora dos arquivos CSS (por exemplo, ao usar @applyem um arquivo Vue ou Svelte).

    Você pode referenciar nomes de classes usando @apply.

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
/* Declare TailwindCSS */
@import "tailwindcss";

/* Declare custom colors, fonts, and breakpoints; etc. */
@theme {
  --color-primary-500: oklch(0.7 0.1 84);
  --color-primary-600: oklch(0.7 0.1 84);
  --color-mint-500: oklch(0.72 0.11 178);
}

/* Declare custom components */
@utility h1 {
  @apply text-4xl md:text-5xl font-bold text-gray-900;
}

@utility h2 {
  @apply text-3xl md:text-4xl font-bold text-gray-900;
}

@utility h3 {
  @apply text-2xl md:text-3xl font-bold text-gray-900;
}

@utility h4 {
  @apply text-xl md:text-2xl font-semibold text-gray-900;
}

@utility h5 {
  @apply text-lg md:text-xl font-semibold text-gray-900;
}

@utility h6 {
  @apply text-base md:text-lg font-semibold text-gray-900;
}

@utility subtitle {
  @apply text-xl text-gray-600;
}

@utility body {
  @apply text-base text-gray-700;
}

@utility body-sm {
  @apply text-sm text-gray-700;
}

@utility caption {
  @apply text-sm text-gray-500;
}

/* Links */
@utility link {
  @apply text-gray-600 hover:text-primary-500 font-medium duration-200;
}

@utility link-muted {
  @apply text-gray-500 hover:text-gray-700 duration-200;
}

@utility link-primary {
  @apply text-primary-500 hover:text-primary-600 font-medium duration-200;
}

@utility link-underline {
  @apply text-gray-600 hover:text-primary-500 underline duration-200;
}

/* Spacing */
@utility section {
  @apply py-20;
}

@utility container-padded {
  @apply container mx-auto px-4;
}

/* Buttons */
@utility btn {
  @apply px-6 py-3 rounded-lg font-medium transition-colors text-center inline-block;
}

@utility btn-sm {
  @apply px-4 py-2 rounded-lg font-medium transition-colors text-center inline-block text-sm;
}

@utility btn-lg {
  @apply px-8 py-4 rounded-lg font-medium transition-colors text-center inline-block text-lg;
}

@utility btn-primary {
  @apply bg-primary-500 text-white hover:bg-primary-600;
}

@utility btn-secondary {
  @apply bg-white text-primary-500 border border-primary-500 hover:bg-gray-50;
}

@utility btn-white {
  @apply bg-white text-primary-500 hover:bg-gray-100;
}

@utility btn-outline {
  @apply bg-transparent text-white border border-white hover:bg-primary-600;
}

@utility card {
  @apply bg-white rounded-lg shadow-sm overflow-hidden;
}

@utility card-hover {
  @apply transition-all duration-300 hover:shadow-md;
}

@utility feature-card {
  @apply bg-gray-50 p-8 rounded-lg;
}

@utility feature-icon {
  @apply text-primary-500 mb-4 h-12 w-12;
}

@utility hero-section {
  @apply bg-gradient-to-b from-white to-gray-50;
}

@utility section-title-container {
  @apply text-center mb-16;
}

@utility cta-section {
  @apply bg-primary-500 text-white;
}
</style>

<div class="h1">Example h1 Component</class>
<div class="h2">Example h2 Component</class>
<div class="btn text-mint-500">Example Btn Component with text-mint-500</class>

    Perguntas úteis relacionadas:

    • 0
  2. Best Answer

    Substitua @theme por @layer theme Substitua @reference por @apply

    Espero que funcione no Tailwind v4!

    Por fim, certifique-se de que seu tailwind.config.js inclua todas as cores personalizadas, como "primary".

    • -1

relate perguntas