tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          light: "#dce1ec", // For lighter primary color
          DEFAULT: "#6c99f4", // Normal primary color
          dark: "#15202b", // Used for hover, active, etc.
        },
        "pink_color":"#f91880",
        "text_light": "#c3ccdf",
        "text_dark": "#1d2b3c",
        "text_active": "#f5f6f9",
        "text_alternative": "#dce1ec",
        "dark_one" : "#15202b",
        "dark_blue_logo": "#001323",
        "light_blue_logo": "#4BB0F5",
        "dark_two" : "#1e2229",
        "dark_three" : "#21252d",
        "dark_four" : "#272c36",
        "bg_one" : "#2c313c",
        "bg_two" : "#343b48",
        "bg_three" : "#3c4454",
        "icon_color" : "#c3ccdf",
        "icon_hover" : "#dce1ec",
        "icon_pressed" : "#6c99f4",
        "icon_active" : "#f5f6f9",
        "context_color" : "#568af2",
        "context_hover" : "#6c99f4",
        "context_pressed" : "#3f6fd1",
        "logo_blue" : "#4f9fee",
        "text_title" : "#dce1ec",
        "text_foreground" : "#8a95aa",
        "text_description" : "#4f5b6e",
        "text_active" : "#dce1ec",
        "white" : "#f5f6f9",
        "pink-special" : "#ff007f",
        "green_color" : "#00ff7f",
        "red-special" : "#ff5555",
        "yellow-special" : "#f1fa8c",
        "yellow-50":"#fffbeb",
        "yellow-rating" : "#FBBF24",
        "green_compare" : "#10B981",
        "green_compare_hover" : "#D1FAE5",
      },
      spacing: {
        "96": "24rem",
        "110": "27rem",
        '128': '32rem',
        '144': '36rem',
        '160': '40rem',
        '176': '44rem',
        '192': '48rem',
        '208': '52rem',
        '224': '56rem',
        '990': '990px',
        '1/2': '50%',
        '1/3': '33.333333%',
        '2/3': '66.666667%',
        '1/4': '25%',
        '2/4': '50%',
        '3/4': '75%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
        '1/6': '16.666667%',
        '2/6': '33.333333%',
        '3/6': '50%',
        '4/6': '66.666667%',
        '5/6': '83.333333%',
        '1/12': '8.333333%',
        '2/12': '16.666667%',
        '3/12': '25%',
        '4/12': '33.333333%',
        '5/12': '41.666667%',
        '6/12': '50%',
        '7/12': '58.333333%',
        '8/12': '66.666667%',
        '9/12': '75%',
        '10/12': '83.333333%',
        '11/12': '91.666667%',
      },
      padding: { "fluid-video": "56.25%" },
      animation: {
        'ping-slow': 'ping 1s linear infinite',
      },
      aspectRatio: {
        '4/3': '4 / 3',
      }
    },
  },
  plugins: [require('@tailwindcss/aspect-ratio'),],
}