tailwind.config.js

const colors = require("tailwindcss/colors");
module.exports = {
  mode: "jit",
  darkMode: "class",
  purge: [
    "./components/**/*.{vue,js}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    container: {
      center: true,
      screens: {
        sm: "640px",
        md: "768px",
        lg: "1024px",
        xl: "1280px",
      },
    },
    fontFamily: {
      body: ["Poppins"],
    },
    colors: {
      ...colors,
      blueGray: {
        50: "#f4f4f9",
        100: "#e8e8f3",
        200: "#c7c6e0",
        300: "#a5a4ce",
        400: "#615fa9",
        500: "#1d1b84",
        600: "#1a1877",
        700: "#161463",
        800: "#11104f",
        900: "#0e0d41",
      },
      blue: {
        100: "#DAD9FF",
        200: "#B6B4FF",
        300: "#928FFF",
        400: "#7673FF",
        500: "#4945FF",
        600: "#3532DB",
        700: "#2522B7",
        800: "#171693",
        900: "#040A44",
        1000: "#0A0969",
      },
      purple: {
        100: "#EDDBFF",
        200: "#D8B7FF",
        300: "#C193FF",
        400: "#AD78FF",
        500: "#8C4BFF",
        600: "#6C36DB",
        700: "#4F25B7",
        800: "#361793",
        900: "#250E7A",
        1000: "#12014F",
      },
      gray: {
        100: "#F6F6F9",
        200: "#EAEAEF",
        300: "#DCDCE4",
        400: "#C0C0CF",
        500: "#A5A5BA",
        600: "#8E8EA9",
        700: "#666687",
        800: "#4A4A6A",
        900: "#32324D",
        1000: "#212134",
      },
      green: {
        100: "#DDF8DA",
        200: "#B7F2B7",
        300: "#89D890",
        400: "#61B270",
        500: "#328048",
        600: "#246E40",
        700: "#195C39",
        800: "#0F4A31",
        900: "#093D2C",
        1000: "#0C2117",
      },
      cyan: {
        100: "#CCF6FB",
        200: "#9AE7F7",
        300: "#65C9E7",
        400: "#3EA4CF",
        500: "#0C75AF",
        600: "#085B96",
        700: "#06447D",
        800: "#033065",
        900: "#022253",
        1000: "#021535",
      },
      orange: {
        100: "#FDF0D5",
        200: "#FBDEAC",
        300: "#F3C481",
        400: "#E8A95F",
        500: "#D9822F",
        600: "#BA6422",
        700: "#9C4A17",
        800: "#7D340E",
        900: "#682409",
        1000: "#330F01",
      },
    },
  },
  plugins: [],
};