tailwind.config.js

const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        cl1: "#2B2D42",
        cl2: "#8D99AE",
        cl3: "#EDF2F4",
        cl4: "#EF233C",
        cl5: "#D90429",
      },
      spacing: {
        "700px": "700px",
        "600px": "600px",
        "500px": "500px",
        "400px": "400px",
        "300px": "300px",
        "200px": "200px",
        "100px": "100px",
      },
    },
  },
  safelist: [
    "text-cl1",
    "text-cl3",
    "bg-cl1",
    "bg-cl2",
    "bg-cl3",
    "bg-cl4",
    "bg-cl5",
    "w-700px",
    "w-600px",
    "w-500px",
    "w-400px",
    "w-300px",
    "w-200px",
    "w-100px",
    "h-700px",
    "h-600px",
    "h-500px",
    "h-400px",
    "h-300px",
    "h-200px",
    "h-100px",
    "md:w-700px",
    "md:w-600px",
    "md:w-500px",
    "md:w-400px",
    "md:w-300px",
    "md:w-200px",
    "md:w-100px",
    "md:h-700px",
    "md:h-600px",
    "md:h-500px",
    "md:h-400px",
    "md:h-300px",
    "md:h-200px",
    "md:h-100px",
  ],
  variants: {
    extend: {},
  },
  plugins: [],
};