I’m learning react with React with Tailwind and Framer Motion, using this guide specifically. I was at the part where the guide placed in a bunch of custom colors on the tailwind.config specifically for the website.

Afterwards I tried using the normal Tailwind classes that you would place inside the JSX file for a Navbar component and none of the classes seemed to work.

Thank you all, and I hope to hear from you soon.

Here is the code for the tailwind.config:

module.exports = {
  content: ["./src/**/*.{html,js, jsx}"],
  mode: 'jit',
  theme: {
    extend: {
      colors: {
        blue: "#2CBCE9",
        red: "#DC4492",
        yellow: "#FDCC49",
        grey: "#ededed",
        "deep-blue": "#010026",
        "dark-grey": "#757575",
        "opaque-black": "rgba(0,0,0,0,0.35)"
      },
      backgroundImage: (theme) => ({
        "gradient-rainbow":
          "linear-gradient(81.66, #00B5EE 7.21%, #FF45A4 45.05%, #ffba00 78.07%)",
        "gradient-rainblue":
          "linear-gradient(90.66, #24CBFF 14.53%, #FC59FF 69.36%, #FFBD0C 107.73%)",
      }),
      fontFamily: {
        poppins: ["Poppins", "serif"],
        opensans: ["Open Sans", "sans-serif"]
      },

      content: {
        brush: "(./assets/brush.png)",
        person1: "(./assets/person-1.png)",
        person2: "(./assets/person-2.png)",
        person3: "(./assets/person-3.png)",
      },

      screens: {
        xs: "480px",
        sm: "768px",
        md: "1060px"
      }
    },
  },
  plugins: [],
}