cssreactjstailwind-csstailwind-css-3

Tailwind margin and padding not applying

I have a simple React component which renders this:

    <div className="container">
      <h1 className="p-10 underline mx-10 text-3xl">Hello</h1>
    </div>

Here is what that produces. As you can see, the underline and text-3xl classes work, but the margin and padding ones are not applied.

result

devtools

Since some of the classes work, I don't think the config is the issue, but here it is (vite app)

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
};
Solution

  • Figured it out:

    For some reason, since I was using Vite, I needed to install PostCSS.

    Added the package, along with a postcss file, restarted the app and it worked.

    https://tailwindcss.com/docs/guides/vite