Meu css não está aplicando as mudanças na página...

Salve, João!

No código de exemplo que você postou aqui ficou faltando vincular os estilos:

<header className={styles.header}>

 

Vi que vc falou que já tentou, mas acho que vale o text ;) Se mesmo assim não funcionar, manda o link do repositório no github que a gente vê o que tá rolando :)

Fiquei atolado com trabalho e tive que pausar o curso, mas taí o link! Tentei chamar o css na tag header de novo mas continuo na mesma...

https://github.com/JoaoSortudo/code-connect

João, os estilos estão sendo aplicados :)

Mas faltam coisas!

Hoje você tem esses estilos:

.card {
    width: 486px;
    height: 431px;
    background: #171D1F;
}

.header {
    border-radius: 8px 8px 0px 0px;
}

.body {
    color: #BCBCBC;
}

Mas falta bastante coisa. Dá uma olhada aqui na atividade, na opinião do instrutor, que você consegue conferir o gabarito da resposta completo, mas o cardpost.module.css fica assim:

.card {
    width: 486px;
    border-radius: 8px;
    background: #171D1F;
}

.header {
    border-radius: 8px 8px 0px 0px;
    background: #888;
    padding: 24px;
}

.header figure {
    margin: 0;
}

.body {
    color: #BCBCBC;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.body h2 {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; 
    margin: 0;
}

.body p {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
    flex-grow: 1;
}

.footer {
    padding: 16px;
}

E o src/components/CardPost/index.jsx:

import Image from 'next/image'
import { Avatar } from '../Avatar'
import styles from './cardpost.module.css'

export function CardPost ({ post }) {
    return (
        <article className={styles.card}>
            <header className={styles.header}>
                <figure>
                    <Image 
                        src={post.cover} 
                        width={438} 
                        height={133} 
                        alt={`Capa do post de título: ${post.title}`}
                    />
                </figure>
            </header>
            <section className={styles.body}>
                <h2>{post.title}</h2>
                <p>{post.body}</p>
            </section>
            <footer className={styles.footer}>
                <Avatar
                    imageSrc={post.author.avatar} 
                    name={post.author.username}
                />
            </footer>
        </article>
    )
}

você não entendeu, mesmo que eu copie e cole exatamente igual, não muda nada na pagina