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.

Any color palette can be used from tailwind

It's also possible to add a completely custom color palette. Add your existing color shade range from 50 to 950. Or you can also use ui colors to generate the shades based on one color.

// 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: {
          '50': '#effafc',
          '100': '#d6f0f7',
          '200': '#b1e2f0',
          '300': '#7ccce4',
          '400': '#3facd1',
          '500': '#2596be',
          '600': '#20749a',
          '700': '#215e7d',
          '800': '#234f67',
          '900': '#214358',
          '950': '#112a3b',
        },
        secondary: colors.indigo,
        gray: colors.zinc,
      },
    },
  },
};