amycommits / civic_hacking_hub

A place where people can find nonprofits to code for.
2 stars 13 forks source link

Define Tailwind color pallet #48

Closed amycommits closed 3 years ago

amycommits commented 3 years ago

I am including the Tailwind documentation on this in case these instructions are explaining too much: https://tailwindcss.com/docs/customizing-colors#curating-colors

in the root directory there is a tailwind.config.js file

On the first line of the file add: const colors = require('tailwindcss/colors')

then add inside of the theme section ( but not inside extend, you can delete the extend {}) colors: { },

Add all of the colors that are listed in the Tailwind documentation:

transparent: 'transparent',
  current: 'currentColor',
  black: colors.black,
  white: colors.white,
  gray: colors.trueGray,
  indigo: colors.indigo,
  red: colors.rose,
  yellow: colors.amber,

Then add these to the list as the site's custom color

primary: '#f7b226ff',
'primary-dark': '#624104ff',
secondary: '#537d8dff',
'secondary-dark': '#a5c0caff',
tertiary: '#a97d7eff',
'tertiary-dark': '#805b5fff',
'accent': '#971024ff',

color_pallet

This can be tested by adding class="bg-primary"

to the h1 tag in the pages/index.vue file and verifying that the color is now a shade of yellow

amycommits commented 3 years ago

valwebd has created a PR for this