Tutoriais

Alterar a cor base do projeto

Com esse tutorial você será capaz alterar a cor base do boilerplate.


Passo a Passo

Na raiz do projeto existe um arquivo tailwind.config.ts, acesse esse arquivo e altere as cores primary para sua paleta de cores

tailwind.config

import type { Config } from 'tailwindcss'

const config: Config = {
  content: ['./src/**/*.tsx'],
  theme: {
    extend: {
      gridTemplateColumns: {
        app: 'minmax(18rem, 20rem) 1fr',
      },
      colors: {
        'primary/50': '#eff6ff',
        'primary/100': '#dbeafe',
        'primary/200': '#bfdbfe',
        'primary/300': '#93c5fd',
        'primary/400': '#60a5fa',
        'primary/500': '#3b82f6',
        'primary/600': '#2563eb',
        'primary/700': '#1d4ed8',
        'primary/800': '#1e40af',
        'primary/900': '#1e3a8a',
        'primary/950': '#172554',
      },
    },
  },
  plugins: [],
}
export default config

Altere as cores do projeto

O arquivo de configuração do tailwind foi criado com cores personalizadas para facilitar a mudança de cores para paleta de cores do seu projeto. Alterando as cores primary nesse arquivo de config todo o projeto terá a paleta de cor do seu projeto.

Previous
Lançar em 10 minutos