Skip to content

Add props for margin #103

@ukch

Description

@ukch

Ref: https://tailwindcss.com/docs/margin/

TailwindCSS has a lot of custom classes for margin, among them:

  • m-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin: $value;
  • -m-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin: -$value;
  • my-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-top: $value; margin-bottom: $value;
  • -my-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-top: -$value; margin-bottom: -$value;
  • mx-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-right: $value; margin-left: $value;
  • -mx-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-right: -$value; margin-left: -$value;
  • m{t,r,b,l}-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-{top,right,bottom,left}: $value;
  • -m{t,r,b,l}-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-{top,right,bottom,left}: -$value;

As far as I can see, these are not provided for in this library yet. Would it be possible to add margin props corresponding to these values?

I can see this working something like this:

<Container mt={6} />

is functionally the same as

<Container className="mt6" />

For negative values:

<Container mt={-6} />

would be the same as

<Container className="-mt6" />

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions