something TailwindCSS styles are not effective in my Next js app

Question

I don't know why, in my Nextjs app, there were times when I used the tailwind style to set the width and height of an element, but instead needed to create a class and then add the appropriate Settings to that class.Also, in the same element, I set the styles such as flex to work, but I never set the width and height to work (I need to manually create a class to add in this class).In addition, I also included this file in the tailwind.config.ts pair

Here's my example

Footer/index.tsx
export default function Footer() {
  return (
    <footer className="w100%">
      // this footer is a class I created manually
      {/* <div className="footer"> */}
        // The width and height Settings here are not in effect😥
      <div className="h100% py-40px mx-100px">
        // The width and height Settings here are not in effect😥
        <div className="h100% flex flex-row mx-100px justify-between items-center">
          <div>....</div>
          <ul>something about my social links</ul>
        </div>
      </div>
    </footer>
  );
}

Footer/Footer.module.css

footer {
  border-top: 1px solid #e5e7eb;
  height: 130px;

  .footer {
    height: 100%;
    padding: 40px 0;
    margin: 0 100px;
  }
}

tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/ui/**/**/*.{ts,jsx,tsx}", "./src/app/**/*.{ts,jsx,tsx}"],
  theme: {
    extend: {
      gridTemplateColumns: {},
      colors: {},
    },
    keyframes: {},
  },
};
export default config;

Answer 1

Here are a couple of things that you did wrong. It's important you visit the docs and use it as a guide

• w100% is not a tailwind class. Instead, it's w-full
• h100% is not a tailwind class. Instead, it's h-full

When using Arbitrary values,

• mx-100px is supposed to be mx-[100px]
• py-40px - py-[40px]

export default function Footer() {
  return (
    <footer className="w-full">
      {/* <div className="footer"> */}
      <div className="h-full py-[40px] mx-[100px]">
        <div className="h-full flex flex-row mx-[100px] justify-between items-center">
          <div>....</div>
          <ul>something about my social links</ul>
        </div>
      </div>
    </footer>
  );
}