How to customize colors and fonts

[massiccio]

Hello,

your template looks great, however I'd like to customize the colors of text and buttons, and potentially fonts too.
As an example, I am trying to make the text in index.astro blue

<HeroSection
title=<span class="text-yellow-500 dark:text-yellow-400">Queue Works</span>, Propel Your Business to New Heights

I understand that "text-yellow-500" comes from Tailwind CSS, however replacing it with "text-blue-500", which is also a Tailwind color
https://tailwind.build/classes/text-color/text-blue-500

results in the text turning black.

For what buttons are concerned instead, i only managed to see changes by customizing the content of tailwind.config.mjs. Am I doing something wrong?

I have found the documentation great for what the content customization is concerned, however styles and colors are not really mentioned.

Thank you in advance.

[mearashadowfax]

Hi @massiccio!

By default, all Tailwind colors in the template are removed for better control over the design system. This means that if you want to use additional colors (like text-blue-500), you'll need to manually add them to the colors section of the tailwind.config.mjs file.

For example, if you want to enable blue, you can modify your config like this:

theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",
      black: "#000000",
      white: "#ffffff",
      gray: colors.gray,
      indigo: colors.indigo,
      neutral: colors.neutral,
      red: colors.red, 
      zinc: colors.zinc,
      blue: colors.blue // This will enable Tailwind’s blue color shades
    },

Or you can enable all Tailwind colors:

theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",
      ...colors, // Enables all Tailwind colors
      "bermuda": "#78dcca",  // Your custom colors
     },

For fonts, the template uses system-ui by default, but you can extend or override it in tailwind.config.mjs under extend.fontFamily:

extend: {
  fontFamily: {
    sans: ["Roboto", ...defaultTheme.fontFamily.sans],
    serif: ["Lora", ...defaultTheme.fontFamily.serif],
  },
}

You can find more details in the Tailwind documentation: https://v3.tailwindcss.com/docs/font-family#using-custom-values

Hope this helps!