tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{html,js,jsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        eggshell: "#fffcf2",
        notif: "#fbf5e9",
        "notif-bord": "#f4e1c133",
        accent: "#e2725b",
        "terra-cotta": "#E2725B",
        p: {
          button: "#E2725B",
          button2: "#FFCC00",
          button3: "#808000",
          button4: "#D6D602",
          button5: "#F4E1C1",
          button6: "#FFCC00",
        },
        n: {
          n1: "#333333",
          n2: "#666666",
          n3: "#999999",
          n4: "#cccccc",
          n5: "#FBF5E9",
          n6: "#F4F0EB",
          n7: "#FFFFFF",
          n8: "#F9F9F9",
        },
      },
      fontFamily: {
        pop: ["Poppins", "Arial", "sans-serif"],
      },
      width: {
        28: "40rem",
      },
      height: {
        80: "20rem",
      },
      backgroundImage: {
        backgroud: "url('./assets/background.png')",
      },
      spacing: {
        115: "115px",
      },
      screens: {
        tablet: "768px",
        // => @media (min-width: 768px) { ... }

        laptop: "1330px",
        // => @media (min-width: 1330px) { ... }

        gridTemplateRows: {
          // Simple 16 row grid
          16: "repeat(16, minmax(0, 1fr))",

          // Complex site-specific row configuration
          layout: "200px minmax(900px, 1fr) 100px",
        },
      },
    },
    plugins: [],
  },
};