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.