lsa_custom_colors_for_tailwindcss Tailwind Templates

Lsa_custom_colors_for_tailwindcss

lsa_custom_colors_for_tailwindcss

Update the config/tailwind.config.js file to load the color pallettes and then register them for use in tailwindcss.

<!-- config/tailwind.config.js -->
const umich_colors = require('../app/javascript/tailwindcss_pallettes/umichColors.js');
const lsa_colors = require('../app/javascript/tailwindcss_pallettes/lsaColors.js');

module.exports = {

...
  theme: {
    extend: {
      colors: {
        umich: umich_colors.umich,
        lsa: lsa_colors.lsa,
      },
    },
  },
...
}

These namespaced pallettes once loaded into the tailwind configs, which allows developers to utilize the colors as they would any other tailwindcss defined classes. For example if you had a custom pallette for lsa thacluded a color named blue-500 you would be able to utilize the color with regular tailwindcss classess such as bg-lsa-blue and hover:text-lsa-blue etc.

Top categories

Loading Svelte Themes