← Pagina Inicial

Recursos, Metadados e CSS

1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9

Dicas de estilo

Aqui estão algumas dicas de estilo que podem ser úteis.

Você pode apenas ler as seções a seguir. Não há necessidade de fazer alterações em nosso aplicativo!

Usando a biblioteca classnames para alternar classes

classnames é uma biblioteca simples que permite alternar facilmente os nomes das classes. Você pode instalá-lo usando o npm install classnames ou yarn add classnames.

Dê uma olhada no README para obter detalhes, mas aqui está o uso básico:

• Suponha que você deseje criar um componente Alerta que aceite tipo, que pode ser 'sucesso' ou 'erro'.

• Se for "sucesso", você deseja que a cor do texto seja verde. Se for um "erro", você deseja que a cor do texto seja vermelha.

Você pode primeiro escrever um módulo CSS (por exemplo, alert.module.css) assim:

.success {
  color: green;
}
.error {
  color: red;
}

E use classnames como este:

import styles from './alert.module.css'
import cn from 'classnames'

export default function Alert({ type }) {
  return (
    <div
      className={cn({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error'
      })}
    >
      {children}
    </div>
  )
}

Personalizando a configuração PostCSS

Pronto para uso, sem configuração, o Next.js compila CSS usando PostCSS.

Para personalizar a configuração do PostCSS, você pode criar um arquivo de nível superior chamado postcss.config.js. Isso é útil se você estiver usando bibliotecas como o Tailwind CSS.

Aqui está um exemplo postcss.config.js para usar o Tailwind CSS com purgecss, que remove o CSS não utilizado.

• Você precisa instalar o tailwindcss, @fullhuman/postcss-purgecss e postcss-preset-env.

• Você não precisa do autoprefixer porque o Next.js o inclui por padrão.

module.exports = {
  plugins: [
    'tailwindcss',
    ...(process.env.NODE_ENV === 'production'
      ? [
          [
            '@fullhuman/postcss-purgecss',
            {
              content: [
                './pages/**/*.{js,jsx,ts,tsx}',
                './components/**/*.{js,jsx,ts,tsx}'
              ],
              defaultExtractor: content =>
                content.match(/[\w-/:]+(?<!:)/g) || []
            }
          ]
        ]
      : []),
    'postcss-preset-env'
  ]
}

Para saber mais sobre a configuração personalizada do PostCSS, consulte nossa documentação.

Usando Sass

Pronto, o Next.js permite importar o Sass usando as extensões .scss e .sass. Você pode usar o Sass no nível do componente via Módulos CSS e a extensão .module.scss ou .module.sass.

Antes de poder usar o suporte integrado ao Sass do Next.js, certifique-se de instalar o sass:

npm install sass

É isso nesta lição!

Para saber mais sobre os módulos CSS e suporte CSS integrados do Next.js., consulte nossa documentação.

← Pagina Inicial