Style

Making the the directory customized to your niche and brand is a very important task.

Step 1: Choosing Color Pallette and Font.

First we can customize the colors by selecting a primary, secondary and gray color in tailwind config.

The defaults are sky, indigo and zinc respectively. Simply changing DM Sans with a font available on google fonts will download the required font and set it as the font for the website.

// tailwind.config.ts
import colors from "tailwindcss/colors";
import typography from "@tailwindcss/typography";
import forms from "@tailwindcss/forms";

export default {
  darkMode: "class",
  plugins: [typography(), forms()],
  theme: {
    extend: {
      fontFamily: {
        display: ["DM Sans"],
      },
      colors: {
        primary: colors.sky,
        secondary: colors.indigo,
        gray: colors.zinc,
      },
    },
  },
};

Then you also need to replace the display "DM Sans" in the tailwind.config.ts to your new font.