tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    fontFamily: {
      sans: [
        '"Roboto", sans-serif',
        {
          fontFeatureSettings: '"clig", "liga"',
        },
      ],
    },
    fontSize: {
      base: "12px",
      small: "14px",
      s: "16px",
      xl: "18px",
      "2xl": "20px",
      "3xl": "24px",
      "4xl": "28px",
    },
    colors: {
      primary: "#F81539",
      black: "#3E3232",
      white: "#FFFFFF",
      dark: "#000000",
      secondary: "#FC4308",
      gray: "#F5F5F5",
      transparent: "transparent",
      "primary-75": "rgba(248, 21, 57, 0.75)",
      "black-75": "rgba(62, 50, 50, 0.75)",
      "white-75": "rgba(255, 255, 255, 0.75)",
      "dark-75": "rgba(0, 0, 0, 0.75)",
      "secondary-75": "rgba(252, 67, 8, 0.75)",
      "gray-75": "rgba(62, 50, 50, 0.75)",
      "primary-50": "rgba(248, 21, 57, 0.50)",
      "black-50": "rgba(62, 50, 50, 0.50)",
      "white-50": "rgba(255, 255, 255, 0.50)",
      "dark-50": "rgba(0, 0, 0, 0.50)",
      "secondary-50": "rgba(252, 67, 8, 0.50)",
      "primary-25": "rgba(248, 21, 57, 0.25)",
      "black-25": "rgba(62, 50, 50, 0.25)",
      "white-25": "rgba(255, 255, 255, 0.25)",
      "dark-25": "rgba(0, 0, 0, 0.25)",
      "secondary-25": "rgba(252, 67, 8, 0.25)",
      "primary-10": "rgba(248, 21, 57, 0.10)",
      "black-10": "rgba(62, 50, 50, 0.10)",
      "white-10": "rgba(255, 255, 255, 0.10)",
      "dark-10": "rgba(0, 0, 0, 0.10)",
      "secondary-10": "rgba(252, 67, 8, 0.10)",
      "primary-5": "rgba(248, 21, 57, 0.05)",
      "black-5": "rgba(62, 50, 50, 0.05)",
      "white-5": "rgba(255, 255, 255, 0.05)",
      "dark-5": "rgba(0, 0, 0, 0.05)",
      "secondary-5": "rgba(252, 67, 8, 0.05)",
      "primary-0": "rgba(248, 21, 57, 0.0)",
      "black-0": "rgba(62, 50, 50, 0.0)",
      "white-0": "rgba(255, 255, 255, 0.0)",
      "dark-0": "rgba(0, 0, 0, 0.0)",
      "secondary-0": "rgba(252, 67, 8, 0.0)",
    },
    extend: {},
  },
  plugins: [],
};