CODEWITHSUNDEEP
tailwind-css
Honey Jeet
Honey Jeet

Reputation: 285

How to use padding negative in tailwind to make it responsive?

I'm using tailwind css for designing my site but making responsive is tough can anyone help?

Upvotes: 20

Views: 48120

Answers (4)

manchild
manchild

Reputation: 21

Inside tailwind.config.js file, you can extend Tailwind with your own custom utility classes where you can easily add a custom class something like

neg-m-16:{margin:-1rem}

and use it in your component. For more you can refer to tailwindcss.com on Adding custom utilities

Upvotes: 2

Jan Švábík
Jan Švábík

Reputation: 411

In case you've defined your own theme values in tailwind.config.cjs and you use the theme() tailwind function and you want to use the negative value, you can use calc() function to multiply the value by -1 which will result in the intended value:

.your-selector {
    margin-bottom: calc(-1 * theme('spacing.5'));
}

Note that you can't use negative padding, only margin, as mentioned in this answer.

Upvotes: -1

Jon Snow
Jon Snow

Reputation: 71

You can write your custom value like this even negative value too,

py-[-30px] mx-[-20px] translate-y-[-50%] translate-x-[-50%]

Upvotes: 5

Vipul Sinha
Vipul Sinha

Reputation: 840

You cannot use padding as negative value in tailwind. Try margin as

-m-4

-m-16

and u can refer tailwindcss.com for more reference

Upvotes: 51

Related Questions