Padding and margin are not working on Vue.js _ TW v4.0

[ramyus889]

I have initialized a new project and installed the necessary packages, including Tailwind CSS v4.0. However, when I began creating a component, the padding and margin styles were not applying as expected. I verified that everything was installed correctly according to the documentation. I need assistance in resolving this issue. At one point, I prefixed the padding and margin classes with the '!' modifier, and they worked. How can I achieve the same effect without using the '!' modifier? Here’s the code.

  div class="text-[clamp(1.9rem,_3.5vw,_5.25rem)] text-center !pt-[160px] !pb-[80px] !mx-[40px]"
    The first human-quality AI agent
  div

and I have installed vuetify

[samstorment]

I had a similar issue where a lot of my styles seemed to be alright but margin and padding were obviously very wrong. In v3, my main CSS file had reset styles like the ones below. I like to reset all margin and padding to 0 and handle those manually for each element and this worked fine in v3. I think v4 brought quite a few specificity changes because of the substantial use of CSS @layer and this made it so all my elements always had 0 margin and padding, even when using a tailwind class like <div class="p-4"></div>.

@tailwind base;
@tailwind components;
@tailwind utilities;

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: sans-serif;
    color: #333;
}

To fix things all I had to do was move my reset styles into @layer base. So now my CSS file looks like the below for v4.

@import 'tailwindcss';

@layer base {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
        padding: 0;
    }

    html {
        font-family: sans-serif;
        color: #333;
    }
}

I figured this out reading this section of the v4 docs

[CodingCookiee]

Here is what worked for me ; its a comboination of different solution(Combining Custom Preflight with Selective Layer Importing) but mostly realible instead of shortterm:

Follow this sequence :
2. Explicitly defining layer order to ensure utilities override base
3. Custom Preflight to remove default margins and paddings
4. In the global css or index.css; i.e, the main css file :

• Define layer order explicitly
• Import Tailwind as a whole first
• Custom preflight instead of default

Here are snippet to help out:

• tailwind-config:

`/* eslint-disable import/no-anonymous-default-export */

/** @type {import('tailwindcss').Config} /
export default {
content: [
"./src/app/**/.{js,ts,jsx,tsx,mdx}",
"./src/components//*.{js,ts,jsx,tsx,mdx}",
"./src/context//*.{js,ts,jsx,tsx,mdx}",
],
// Explicitly defining layer order to ensure utilities override base
layers: {
theme: {},
base: {},
components: {},
utilities: {},
},
theme: {
extend: {
},
plugins: [],
};`

• global.css for next ; for vite it is index.css:

`/* Define layer order explicitly */
@layer tw, tw.theme, tw.base, tw.components, tw.utilities, custom;

/* Import Tailwind as a whole first /
@import "tailwindcss" layer(tw);
/ Custom preflight instead of default */
@import "./styles/custom-preflight.css" layer(tw.base);
@plugin "tailwindcss-animate";

/* Custom utilities in the custom layer */
@layer custom {
}

/* Web component compatibility fix /
:host {
/ Ensuring web components can receive their own margin/padding */
margin: initial;
padding: initial;
}`

• custom-preflight.css
  `
  @layer tw.base {
  /* Base font styles */
  html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: theme('fontFamily.sans');
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  }

  /* Box sizing rules */
  *,
  *::before,
  *::after {
  box-sizing: border-box;
  }

  /* Reset margins for specific elements only (not universal) */
  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  }

  /* Typography */
  body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  }

  /* Media Defaults */
  img,
  picture,
  video,
  canvas,
  svg {
  display: block;
  max-width: 100%;
  }

  img {
  max-inline-size: 100%;
  }

  /* Form Elements */
  input,
  button,
  textarea,
  select {
  font: inherit;
  }

  /* Text Overflow */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  overflow-wrap: break-word;
  font-size: inherit;
  font-weight: inherit;
  }

  /* List styling */
  ol[role="list"],
  ul[role="list"] {
  list-style: none;
  padding-inline: 0;
  }
  }`

I hope this would help

[chmiiller]

thaaaannkk you for saving my project

[Starco3000]

Damn, you are truly a hero. Thank you so much bro.

[Koipix]

Thanks a lot! This worked for me, gotta read the new v4 docs.

[haidar47x]

Works in React as well.

[jadesolaadeagbo]

Thank you so much. It worked for me.

[SimpleHelloProgram]

Thank you this worked for me top