navin-moorthy / vscode-css-snippets

Collection of CSS Snippets to make your life easier by auto-completing css rules.

VSCode CSS Snippets

Description

Collection of CSS Snippets to make your life easier by auto-completing common css rules, Tailwind utility classes as css rules - Tailwind and 1 line layouts

It's not debatable, most of us got used to utility classes from Tailwind, BootStrap etc,. But when you come back to write plain CSS, wouldn't be great to have those utility classes converted as snippets instead of typing the CSS rules?

Apart from CSS Utility snippets, collection of snippets from popular CSS examples found all over the web can be found.

To see the list of all the CSS Snippets, go here →

Want to have your own favourite CSS Snippets in this extension, see Contributing →

Installation

Install via the Visual Studio Code Marketplace →

You can enable tab completion (recommended) by opening Code > Preferences > Settings (on a Mac) and applying "editor.tabCompletion": "onlySnippets" to your personal settings

Table of Contents

• VSCode CSS Snippets
  • Description
  • Installation
  • Table of Contents
  • Snippets
    • Common
      • CSS Reset
      • Pseudo Styles
      • Breakpoints
    • Tailwind
      • Layout Snippets
      • FlexBox Snippets
      • Grid Snippets
      • Spacing Snippets
    • 1 line layouts
  • Extra Guides
    • Snippets generation from Selected line/lines
  • Contributing
  • Attributions

Snippets

Common

CSS Reset

Snippet	Purpose
css-reset	An opinionated set of base styles Cloned from Tailwind Preflight - Original File

Pseudo Styles

Snippet	Purpose
hover	:hover
focus	:focus
active	:active
disabled	:disabled
visited	:visited
first	:first-child
last	:last-child
even	:nth-child(2n)
odd	:nth-child(odd)
nth-child	:nth-child(rule)

Breakpoints

Snippet	Purpose
resp	Get all tailwind breakpoints - 640px - 768px - 1024px - 1280px
resp-sm	Get tailwind breakpoint - sm - 640px
resp-md	Get tailwind breakpoint - md - 768px
resp-lg	Get tailwind breakpoint - lg - 1024px
resp-xl	Get tailwind breakpoint - xl - 1280px
resp-selected	Get all tailwind breakpoints for selected class/classes - 640px - 768px - 1024px - 1280px See how →
resp-sm-selected	Get tailwind breakpoint for selected class/classes - sm - 640px See how →
resp-md-selected	Get tailwind breakpoint for selected class/classes - md - 768px See how →
resp-lg-selected	Get tailwind breakpoint for selected class/classes - lg - 1024px See how →
resp-xl-selected	Get tailwind breakpoint for selected class/classes - xl - 1280px See how →

Tailwind

Layout Snippets

List of all Layout Snippets →

FlexBox Snippets

List of all FlexBox Snippets →

Grid Snippets

List of all Grid Snippets →

Spacing Snippets

List of all Spacing Snippets →

1 line layouts

Learn 1linelayouts in detail from Web Dev →

Snippet	Purpose
super-centered	place-items: center;
deconstructed-pancake	flex: 0 1 baseWidth};
sidebar-says	grid-template-columns: minmax(min, max) ...};
pancake-stack	grid-template-rows: auto 1fr auto;
classic-holy-grail-layout	grid-template: auto 1fr auto / auto 1fr auto;
12-span-grid	grid-template-columns: repeat(12, 1fr);
ram	grid-template-columns: repeat(auto-fit, minmax(base, 1fr));
line-up	justify-content: space-between;
clamping-my-style	clamp(min, actual, max);
respect-for-aspect	aspect-ratio: width / height};

Extra Guides

Snippets generation from Selected line/lines

Contributing

This is an Open Source Project with MIT License.

You can also contribute to this extension by adding your own list of CSS Snippets which you think will help others increase their productivity.

See Contributing Docs → for detailed guidance.

Attributions

Snippet Ideation:

• Tailwind by Adam Wathan and Steve Schoger
• 1linelayouts by Una Kravets 👩🏻‍💻

Snippet Generation:

• Snippet Generator by Paweł Grzybek

Docs Inspiration:

• Vue VSCode Snippets by Sarah Drasner
• Tailwind Intellisense by Brad Cornes

Contributing Inspiration:

• Chakra UI by Segun Adebayo

Huge thanks 🙏: to above wonderful persons for creating awesome projects which helped me build this project.

vscode-css-snippets's Issues

Add `https` gif link in 1linelayouts

• Correct the typo in description
• Add https gif link to 1 line layouts section

Add attributions to the docs

Snippets Ideation:

• Tailwind by Adam Wathan and Steve Schoger
• 1linelayouts by Una Kravets 👩🏻‍💻

Snippet Generation:

• Snippet Generator by Paweł Grzybek

Docs Inspiration:

• vue-vscode-snippets by Sarah Drasner
• Tailwind Intellisense by Brad Cornes

Contributing Inspiration:

• Chakra UI by Segun Adebayo

Add Tailwind Grid snippets

Tailwind Grid

Grid Template Columns

Snippet	Purpose
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5	grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6	grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7	grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8	grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9	grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10	grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11	grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12	grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none	grid-template-columns: none;

Grid Column Start / End

Snippet	Purpose
col-auto	grid-column: auto;
col-span-1	grid-column: span 1 / span 1;
col-span-2	grid-column: span 2 / span 2;
col-span-3	grid-column: span 3 / span 3;
col-span-4	grid-column: span 4 / span 4;
col-span-5	grid-column: span 5 / span 5;
col-span-6	grid-column: span 6 / span 6;
col-span-7	grid-column: span 7 / span 7;
col-span-8	grid-column: span 8 / span 8;
col-span-9	grid-column: span 9 / span 9;
col-span-10	grid-column: span 10 / span 10;
col-span-11	grid-column: span 11 / span 11;
col-span-12	grid-column: span 12 / span 12;
col-start-1	grid-column-start: 1;
col-start-2	grid-column-start: 2;
col-start-3	grid-column-start: 3;
col-start-4	grid-column-start: 4;
col-start-5	grid-column-start: 5;
col-start-6	grid-column-start: 6;
col-start-7	grid-column-start: 7;
col-start-8	grid-column-start: 8;
col-start-9	grid-column-start: 9;
col-start-10	grid-column-start: 10;
col-start-11	grid-column-start: 11;
col-start-12	grid-column-start: 12;
col-start-13	grid-column-start: 13;
col-start-auto	grid-column-start: auto;
col-end-1	grid-column-end: 1;
col-end-2	grid-column-end: 2;
col-end-3	grid-column-end: 3;
col-end-4	grid-column-end: 4;
col-end-5	grid-column-end: 5;
col-end-6	grid-column-end: 6;
col-end-7	grid-column-end: 7;
col-end-8	grid-column-end: 8;
col-end-9	grid-column-end: 9;
col-end-10	grid-column-end: 10;
col-end-11	grid-column-end: 11;
col-end-12	grid-column-end: 12;
col-end-13	grid-column-end: 13;
col-end-auto	grid-column-end: auto;

Grid Template Rows

Snippet	Purpose
grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3	grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4	grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5	grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6	grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-none	grid-template-rows: none;

Grid Row Start / End

Snippet	Purpose
row-auto	grid-row: auto;
row-span-1	grid-row: span 1 / span 1;
row-span-2	grid-row: span 2 / span 2;
row-span-3	grid-row: span 3 / span 3;
row-span-4	grid-row: span 4 / span 4;
row-span-5	grid-row: span 5 / span 5;
row-span-6	grid-row: span 6 / span 6;
row-start-1	grid-row-start: 1;
row-start-2	grid-row-start: 2;
row-start-3	grid-row-start: 3;
row-start-4	grid-row-start: 4;
row-start-5	grid-row-start: 5;
row-start-6	grid-row-start: 6;
row-start-7	grid-row-start: 7;
row-start-auto	grid-row-start: auto;
row-end-1	grid-row-end: 1;
row-end-2	grid-row-end: 2;
row-end-3	grid-row-end: 3;
row-end-4	grid-row-end: 4;
row-end-5	grid-row-end: 5;
row-end-6	grid-row-end: 6;
row-end-7	grid-row-end: 7;
row-end-auto	grid-row-end: auto;

Gap

Snippet	Purpose
gap-0	gap: 0;
gap-1	gap: 0.25rem;
gap-2	gap: 0.5rem;
gap-3	gap: 0.75rem;
gap-4	gap: 1rem;
gap-5	gap: 1.25rem;
gap-6	gap: 1.5rem;
gap-8	gap: 2rem;
gap-10	gap: 2.5rem;
gap-12	gap: 3rem;
gap-16	gap: 4rem;
gap-20	gap: 5rem;
gap-24	gap: 6rem;
gap-32	gap: 8rem;
gap-40	gap: 10rem;
gap-48	gap: 12rem;
gap-56	gap: 14rem;
gap-64	gap: 16rem;
gap-px	gap: 1px;
row-gap-0	row-gap: 0;
row-gap-1	row-gap: 0.25rem;
row-gap-2	row-gap: 0.5rem;
row-gap-3	row-gap: 0.75rem;
row-gap-4	row-gap: 1rem;
row-gap-5	row-gap: 1.25rem;
row-gap-6	row-gap: 1.5rem;
row-gap-8	row-gap: 2rem;
row-gap-10	row-gap: 2.5rem;
row-gap-12	row-gap: 3rem;
row-gap-16	row-gap: 4rem;
row-gap-20	row-gap: 5rem;
row-gap-24	row-gap: 6rem;
row-gap-32	row-gap: 8rem;
row-gap-40	row-gap: 10rem;
row-gap-48	row-gap: 12rem;
row-gap-56	row-gap: 14rem;
row-gap-64	row-gap: 16rem;
row-gap-px	row-gap: 1px;
col-gap-0	column-gap: 0;
col-gap-1	column-gap: 0.25rem;
col-gap-2	column-gap: 0.5rem;
col-gap-3	column-gap: 0.75rem;
col-gap-4	column-gap: 1rem;
col-gap-5	column-gap: 1.25rem;
col-gap-6	column-gap: 1.5rem;
col-gap-8	column-gap: 2rem;
col-gap-10	column-gap: 2.5rem;
col-gap-12	column-gap: 3rem;
col-gap-16	column-gap: 4rem;
col-gap-20	column-gap: 5rem;
col-gap-24	column-gap: 6rem;
col-gap-32	column-gap: 8rem;
col-gap-40	column-gap: 10rem;
col-gap-48	column-gap: 12rem;
col-gap-56	column-gap: 14rem;
col-gap-64	column-gap: 16rem;
col-gap-px	column-gap: 1px;

Grid Auto Flow

Snippet	Purpose
grid-flow-row	grid-auto-flow: row;
grid-flow-col	grid-auto-flow: column;
grid-flow-row-dense	grid-auto-flow: row dense;
grid-flow-col-dense	grid-auto-flow: column dense;

Add `preview` flag

Ref: VSCode Docs Extension API

{
  "preview": true
}

Add gallery banner and color to package.json

Example: VSCode docs Example

"galleryBanner": {
  "color": "#EA2E6E",
  "theme": "dark"
},

Set theme to dark to have the text in white color for a better contrast ratio with the theme color.

Seperate Tailwind Layout Snippets

Move Margin, Padding and Space Between of Space snippets to seperate snippet json because of more no. of lines.

Create a new logo

Create and add an icon to the extension.

Ref: VSCode Docs Example

Add examples for each of the snippets sections already added

Add ->

• Tailwind Flex intro gif
• Tailwind Grid intro gif
• Tailwind Layout intro gif
• Tailwind Spacing intro gif

Add Tailwind FlexBox Utilities

Add all below Tailwind FleBox Utilites,

Tailwind Grid

Flex Direction

Snippet	Purpose
flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

Flex Wrap

Snippet	Purpose
flex-no-wrap	flex-wrap: nowrap;
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;

Align Items

Snippet	Purpose
items-stretch	align-items: stretch;
items-start	align-items: flex-start;
items-center	align-items: center;
items-end	align-items: flex-end;
items-baseline	align-items: baseline;

Align Content

Snippet	Purpose
content-start	align-content: flex-start;
content-center	align-content: center;
content-end	align-content: flex-end;
content-between	align-content: space-between;
content-around	align-content: space-around;

Align Self

Snippet	Purpose
self-auto	align-self: auto;
self-start	align-self: flex-start;
self-center	align-self: center;
self-end	align-self: flex-end;
self-stretch	align-self: stretch;

Justify Content

Snippet	Purpose
justify-start	justify-content: flex-start;
justify-center	justify-content: center;
justify-end	justify-content: flex-end;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;

Flex

Snippet	Purpose
flex-initial	flex: 0 1 auto;
flex-1	flex: 1 1 0%;
flex-auto	flex: 1 1 auto;
flex-none	flex: none;

Flex Grow

Snippet	Purpose
flex-grow	flex-grow: 1;
flex-grow-0	flex-grow: 0;

Flex Shrink

Snippet	Purpose
flex-shrink	flex-shrink: 1;
flex-shrink-0	flex-shrink: 0;

Flex Order

Snippet	Purpose
order-first	order: -9999;
order-last	order: 9999;
order-none	order: 0;
order-1	order: 1;
order-2	order: 2;
order-3	order: 3;
order-4	order: 4;
order-5	order: 5;
order-6	order: 6;
order-7	order: 7;
order-8	order: 8;
order-9	order: 9;
order-10	order: 10;
order-11	order: 11;
order-12	order: 12;

Add 1 line layouts snippets

Ref: 1 Line Layouts

Add empty new lines as used in all the other css snippets

Add , "" in the end of the pseudo.json, css-reset.json & layout.json

Add Tailwind Spacing Padding

Add Tailwind Spacing Padding

{
  "py-px": {
    "prefix": "py-px",
    "body": ["padding-top: 1px;", "padding-bottom: 1px;", ""],
    "description": "py-px"
  },
  "py-0": {
    "prefix": "py-0",
    "body": ["padding-top: 0;", "padding-bottom: 0;", ""],
    "description": "py-0"
  },
  "py-1": {
    "prefix": "py-1",
    "body": ["padding-top: 0.25rem;", "padding-bottom: 0.25rem;", ""],
    "description": "py-1"
  },
  "py-2": {
    "prefix": "py-2",
    "body": ["padding-top: 0.5rem;", "padding-bottom: 0.5rem;", ""],
    "description": "py-2"
  },
  "py-3": {
    "prefix": "py-3",
    "body": ["padding-top: 0.75rem;", "padding-bottom: 0.75rem;", ""],
    "description": "py-3"
  },
  "py-4": {
    "prefix": "py-4",
    "body": ["padding-top: 1rem;", "padding-bottom: 1rem;", ""],
    "description": "py-4"
  },
  "py-5": {
    "prefix": "py-5",
    "body": ["padding-top: 1.25rem;", "padding-bottom: 1.25rem;", ""],
    "description": "py-5"
  },
  "py-6": {
    "prefix": "py-6",
    "body": ["padding-top: 1.5rem;", "padding-bottom: 1.5rem;", ""],
    "description": "py-6"
  },
  "py-8": {
    "prefix": "py-8",
    "body": ["padding-top: 2rem;", "padding-bottom: 2rem;", ""],
    "description": "py-8"
  },
  "py-10": {
    "prefix": "py-10",
    "body": ["padding-top: 2.5rem;", "padding-bottom: 2.5rem;", ""],
    "description": "py-10"
  },
  "py-12": {
    "prefix": "py-12",
    "body": ["padding-top: 3rem;", "padding-bottom: 3rem;", ""],
    "description": "py-12"
  },
  "py-16": {
    "prefix": "py-16",
    "body": ["padding-top: 4rem;", "padding-bottom: 4rem;", ""],
    "description": "py-16"
  },
  "py-20": {
    "prefix": "py-20",
    "body": ["padding-top: 5rem;", "padding-bottom: 5rem;", ""],
    "description": "py-20"
  },
  "py-24": {
    "prefix": "py-24",
    "body": ["padding-top: 6rem;", "padding-bottom: 6rem;", ""],
    "description": "py-24"
  },
  "py-32": {
    "prefix": "py-32",
    "body": ["padding-top: 8rem;", "padding-bottom: 8rem;", ""],
    "description": "py-32"
  },
  "py-40": {
    "prefix": "py-40",
    "body": ["padding-top: 10rem;", "padding-bottom: 10rem;", ""],
    "description": "py-40"
  },
  "py-48": {
    "prefix": "py-48",
    "body": ["padding-top: 12rem;", "padding-bottom: 12rem;", ""],
    "description": "py-48"
  },
  "py-56": {
    "prefix": "py-56",
    "body": ["padding-top: 14rem;", "padding-bottom: 14rem;", ""],
    "description": "py-56"
  },
  "py-64": {
    "prefix": "py-64",
    "body": ["padding-top: 16rem;", "padding-bottom: 16rem;", ""],
    "description": "py-64"
  },

  "px-px": {
    "prefix": "px-px",
    "body": ["padding-right: 1px;", "padding-left: 1px;", ""],
    "description": "px-px"
  },
  "px-0": {
    "prefix": "px-0",
    "body": ["padding-right: 0;", "padding-left: 0;", ""],
    "description": "px-0"
  },
  "px-1": {
    "prefix": "px-1",
    "body": ["padding-right: 0.25rem;", "padding-left: 0.25rem;", ""],
    "description": "px-1"
  },
  "px-2": {
    "prefix": "px-2",
    "body": ["padding-right: 0.5rem;", "padding-left: 0.5rem;", ""],
    "description": "px-2"
  },
  "px-3": {
    "prefix": "px-3",
    "body": ["padding-right: 0.75rem;", "padding-left: 0.75rem;", ""],
    "description": "px-3"
  },
  "px-4": {
    "prefix": "px-4",
    "body": ["padding-right: 1rem;", "padding-left: 1rem;", ""],
    "description": "px-4"
  },
  "px-5": {
    "prefix": "px-5",
    "body": ["padding-right: 1.25rem;", "padding-left: 1.25rem;", ""],
    "description": "px-5"
  },
  "px-6": {
    "prefix": "px-6",
    "body": ["padding-right: 1.5rem;", "padding-left: 1.5rem;", ""],
    "description": "px-6"
  },
  "px-8": {
    "prefix": "px-8",
    "body": ["padding-right: 2rem;", "padding-left: 2rem;", ""],
    "description": "px-8"
  },
  "px-10": {
    "prefix": "px-10",
    "body": ["padding-right: 2.5rem;", "padding-left: 2.5rem;", ""],
    "description": "px-10"
  },
  "px-12": {
    "prefix": "px-12",
    "body": ["padding-right: 3rem;", "padding-left: 3rem;", ""],
    "description": "px-12"
  },
  "px-16": {
    "prefix": "px-16",
    "body": ["padding-right: 4rem;", "padding-left: 4rem;", ""],
    "description": "px-16"
  },
  "px-20": {
    "prefix": "px-20",
    "body": ["padding-right: 5rem;", "padding-left: 5rem;", ""],
    "description": "px-20"
  },
  "px-24": {
    "prefix": "px-24",
    "body": ["padding-right: 6rem;", "padding-left: 6rem;", ""],
    "description": "px-24"
  },
  "px-32": {
    "prefix": "px-32",
    "body": ["padding-right: 8rem;", "padding-left: 8rem;", ""],
    "description": "px-32"
  },
  "px-40": {
    "prefix": "px-40",
    "body": ["padding-right: 10rem;", "padding-left: 10rem;", ""],
    "description": "px-40"
  },
  "px-48": {
    "prefix": "px-48",
    "body": ["padding-right: 12rem;", "padding-left: 12rem;", ""],
    "description": "px-48"
  },
  "px-56": {
    "prefix": "px-56",
    "body": ["padding-right: 14rem;", "padding-left: 14rem;", ""],
    "description": "px-56"
  },
  "px-64": {
    "prefix": "px-64",
    "body": ["padding-right: 16rem;", "padding-left: 16rem;", ""],
    "description": "px-64"
  },

  "pb-px": {
    "prefix": "pb-px",
    "body": ["padding-bottom: 1px;", ""],
    "description": "pb-px"
  },
  "pb-0": {
    "prefix": "pb-0",
    "body": ["padding-bottom: 0;", ""],
    "description": "pb-0"
  },
  "pb-1": {
    "prefix": "pb-1",
    "body": ["padding-bottom: 0.25rem;", ""],
    "description": "pb-1"
  },
  "pb-2": {
    "prefix": "pb-2",
    "body": ["padding-bottom: 0.5rem;", ""],
    "description": "pb-2"
  },
  "pb-3": {
    "prefix": "pb-3",
    "body": ["padding-bottom: 0.75rem;", ""],
    "description": "pb-3"
  },
  "pb-4": {
    "prefix": "pb-4",
    "body": ["padding-bottom: 1rem;", ""],
    "description": "pb-4"
  },
  "pb-5": {
    "prefix": "pb-5",
    "body": ["padding-bottom: 1.25rem;", ""],
    "description": "pb-5"
  },
  "pb-6": {
    "prefix": "pb-6",
    "body": ["padding-bottom: 1.5rem;", ""],
    "description": "pb-6"
  },
  "pb-8": {
    "prefix": "pb-8",
    "body": ["padding-bottom: 2rem;", ""],
    "description": "pb-8"
  },
  "pb-10": {
    "prefix": "pb-10",
    "body": ["padding-bottom: 2.5rem;", ""],
    "description": "pb-10"
  },
  "pb-12": {
    "prefix": "pb-12",
    "body": ["padding-bottom: 3rem;", ""],
    "description": "pb-12"
  },
  "pb-16": {
    "prefix": "pb-16",
    "body": ["padding-bottom: 4rem;", ""],
    "description": "pb-16"
  },
  "pb-20": {
    "prefix": "pb-20",
    "body": ["padding-bottom: 5rem;", ""],
    "description": "pb-20"
  },
  "pb-24": {
    "prefix": "pb-24",
    "body": ["padding-bottom: 6rem;", ""],
    "description": "pb-24"
  },
  "pb-32": {
    "prefix": "pb-32",
    "body": ["padding-bottom: 8rem;", ""],
    "description": "pb-32"
  },
  "pb-40": {
    "prefix": "pb-40",
    "body": ["padding-bottom: 10rem;", ""],
    "description": "pb-40"
  },
  "pb-48": {
    "prefix": "pb-48",
    "body": ["padding-bottom: 12rem;", ""],
    "description": "pb-48"
  },
  "pb-56": {
    "prefix": "pb-56",
    "body": ["padding-bottom: 14rem;", ""],
    "description": "pb-56"
  },
  "pb-64": {
    "prefix": "pb-64",
    "body": ["padding-bottom: 16rem;", ""],
    "description": "pb-64"
  },

  "pt-px": {
    "prefix": "pt-px",
    "body": ["padding-top: 1px;", ""],
    "description": "pt-px"
  },
  "pt-0": {
    "prefix": "pt-0",
    "body": ["padding-top: 0;", ""],
    "description": "pt-0"
  },
  "pt-1": {
    "prefix": "pt-1",
    "body": ["padding-top: 0.25rem;", ""],
    "description": "pt-1"
  },
  "pt-2": {
    "prefix": "pt-2",
    "body": ["padding-top: 0.5rem;", ""],
    "description": "pt-2"
  },
  "pt-3": {
    "prefix": "pt-3",
    "body": ["padding-top: 0.75rem;", ""],
    "description": "pt-3"
  },
  "pt-4": {
    "prefix": "pt-4",
    "body": ["padding-top: 1rem;", ""],
    "description": "pt-4"
  },
  "pt-5": {
    "prefix": "pt-5",
    "body": ["padding-top: 1.25rem;", ""],
    "description": "pt-5"
  },
  "pt-6": {
    "prefix": "pt-6",
    "body": ["padding-top: 1.5rem;", ""],
    "description": "pt-6"
  },
  "pt-8": {
    "prefix": "pt-8",
    "body": ["padding-top: 2rem;", ""],
    "description": "pt-8"
  },
  "pt-10": {
    "prefix": "pt-10",
    "body": ["padding-top: 2.5rem;", ""],
    "description": "pt-10"
  },
  "pt-12": {
    "prefix": "pt-12",
    "body": ["padding-top: 3rem;", ""],
    "description": "pt-12"
  },
  "pt-16": {
    "prefix": "pt-16",
    "body": ["padding-top: 4rem;", ""],
    "description": "pt-16"
  },
  "pt-20": {
    "prefix": "pt-20",
    "body": ["padding-top: 5rem;", ""],
    "description": "pt-20"
  },
  "pt-24": {
    "prefix": "pt-24",
    "body": ["padding-top: 6rem;", ""],
    "description": "pt-24"
  },
  "pt-32": {
    "prefix": "pt-32",
    "body": ["padding-top: 8rem;", ""],
    "description": "pt-32"
  },
  "pt-40": {
    "prefix": "pt-40",
    "body": ["padding-top: 10rem;", ""],
    "description": "pt-40"
  },
  "pt-48": {
    "prefix": "pt-48",
    "body": ["padding-top: 12rem;", ""],
    "description": "pt-48"
  },
  "pt-56": {
    "prefix": "pt-56",
    "body": ["padding-top: 14rem;", ""],
    "description": "pt-56"
  },
  "pt-64": {
    "prefix": "pt-64",
    "body": ["padding-top: 16rem;", ""],
    "description": "pt-64"
  },

  "pr-px": {
    "prefix": "pr-px",
    "body": ["padding-right: 1px;", ""],
    "description": "pr-px"
  },
  "pr-0": {
    "prefix": "pr-0",
    "body": ["padding-right: 0;", ""],
    "description": "pr-0"
  },
  "pr-1": {
    "prefix": "pr-1",
    "body": ["padding-right: 0.25rem;", ""],
    "description": "pr-1"
  },
  "pr-2": {
    "prefix": "pr-2",
    "body": ["padding-right: 0.5rem;", ""],
    "description": "pr-2"
  },
  "pr-3": {
    "prefix": "pr-3",
    "body": ["padding-right: 0.75rem;", ""],
    "description": "pr-3"
  },
  "pr-4": {
    "prefix": "pr-4",
    "body": ["padding-right: 1rem;", ""],
    "description": "pr-4"
  },
  "pr-5": {
    "prefix": "pr-5",
    "body": ["padding-right: 1.25rem;", ""],
    "description": "pr-5"
  },
  "pr-6": {
    "prefix": "pr-6",
    "body": ["padding-right: 1.5rem;", ""],
    "description": "pr-6"
  },
  "pr-8": {
    "prefix": "pr-8",
    "body": ["padding-right: 2rem;", ""],
    "description": "pr-8"
  },
  "pr-10": {
    "prefix": "pr-10",
    "body": ["padding-right: 2.5rem;", ""],
    "description": "pr-10"
  },
  "pr-12": {
    "prefix": "pr-12",
    "body": ["padding-right: 3rem;", ""],
    "description": "pr-12"
  },
  "pr-16": {
    "prefix": "pr-16",
    "body": ["padding-right: 4rem;", ""],
    "description": "pr-16"
  },
  "pr-20": {
    "prefix": "pr-20",
    "body": ["padding-right: 5rem;", ""],
    "description": "pr-20"
  },
  "pr-24": {
    "prefix": "pr-24",
    "body": ["padding-right: 6rem;", ""],
    "description": "pr-24"
  },
  "pr-32": {
    "prefix": "pr-32",
    "body": ["padding-right: 8rem;", ""],
    "description": "pr-32"
  },
  "pr-40": {
    "prefix": "pr-40",
    "body": ["padding-right: 10rem;", ""],
    "description": "pr-40"
  },
  "pr-48": {
    "prefix": "pr-48",
    "body": ["padding-right: 12rem;", ""],
    "description": "pr-48"
  },
  "pr-56": {
    "prefix": "pr-56",
    "body": ["padding-right: 14rem;", ""],
    "description": "pr-56"
  },
  "pr-64": {
    "prefix": "pr-64",
    "body": ["padding-right: 16rem;", ""],
    "description": "pr-64"
  },

  "pl-px": {
    "prefix": "pl-px",
    "body": ["padding-left: 1px;", ""],
    "description": "pl-px"
  },
  "pl-0": {
    "prefix": "pl-0",
    "body": ["padding-left: 0;", ""],
    "description": "pl-0"
  },
  "pl-1": {
    "prefix": "pl-1",
    "body": ["padding-left: 0.25rem;", ""],
    "description": "pl-1"
  },
  "pl-2": {
    "prefix": "pl-2",
    "body": ["padding-left: 0.5rem;", ""],
    "description": "pl-2"
  },
  "pl-3": {
    "prefix": "pl-3",
    "body": ["padding-left: 0.75rem;", ""],
    "description": "pl-3"
  },
  "pl-4": {
    "prefix": "pl-4",
    "body": ["padding-left: 1rem;", ""],
    "description": "pl-4"
  },
  "pl-5": {
    "prefix": "pl-5",
    "body": ["padding-left: 1.25rem;", ""],
    "description": "pl-5"
  },
  "pl-6": {
    "prefix": "pl-6",
    "body": ["padding-left: 1.5rem;", ""],
    "description": "pl-6"
  },
  "pl-8": {
    "prefix": "pl-8",
    "body": ["padding-left: 2rem;", ""],
    "description": "pl-8"
  },
  "pl-10": {
    "prefix": "pl-10",
    "body": ["padding-left: 2.5rem;", ""],
    "description": "pl-10"
  },
  "pl-12": {
    "prefix": "pl-12",
    "body": ["padding-left: 3rem;", ""],
    "description": "pl-12"
  },
  "pl-16": {
    "prefix": "pl-16",
    "body": ["padding-left: 4rem;", ""],
    "description": "pl-16"
  },
  "pl-20": {
    "prefix": "pl-20",
    "body": ["padding-left: 5rem;", ""],
    "description": "pl-20"
  },
  "pl-24": {
    "prefix": "pl-24",
    "body": ["padding-left: 6rem;", ""],
    "description": "pl-24"
  },
  "pl-32": {
    "prefix": "pl-32",
    "body": ["padding-left: 8rem;", ""],
    "description": "pl-32"
  },
  "pl-40": {
    "prefix": "pl-40",
    "body": ["padding-left: 10rem;", ""],
    "description": "pl-40"
  },
  "pl-48": {
    "prefix": "pl-48",
    "body": ["padding-left: 12rem;", ""],
    "description": "pl-48"
  },
  "pl-56": {
    "prefix": "pl-56",
    "body": ["padding-left: 14rem;", ""],
    "description": "pl-56"
  },
  "pl-64": {
    "prefix": "pl-64",
    "body": ["padding-left: 16rem;", ""],
    "description": "pl-64"
  },

  "p-px": {
    "prefix": "p-px",
    "body": ["padding: 1px;", ""],
    "description": "p-px"
  },
  "p-0": {
    "prefix": "p-0",
    "body": ["padding: 0;", ""],
    "description": "p-0"
  },
  "p-1": {
    "prefix": "p-1",
    "body": ["padding: 0.25rem;", ""],
    "description": "p-1"
  },
  "p-2": {
    "prefix": "p-2",
    "body": ["padding: 0.5rem;", ""],
    "description": "p-2"
  },
  "p-3": {
    "prefix": "p-3",
    "body": ["padding: 0.75rem;", ""],
    "description": "p-3"
  },
  "p-4": {
    "prefix": "p-4",
    "body": ["padding: 1rem;", ""],
    "description": "p-4"
  },
  "p-5": {
    "prefix": "p-5",
    "body": ["padding: 1.25rem;", ""],
    "description": "p-5"
  },
  "p-6": {
    "prefix": "p-6",
    "body": ["padding: 1.5rem;", ""],
    "description": "p-6"
  },
  "p-8": {
    "prefix": "p-8",
    "body": ["padding: 2rem;", ""],
    "description": "p-8"
  },
  "p-10": {
    "prefix": "p-10",
    "body": ["padding: 2.5rem;", ""],
    "description": "p-10"
  },
  "p-12": {
    "prefix": "p-12",
    "body": ["padding: 3rem;", ""],
    "description": "p-12"
  },
  "p-16": {
    "prefix": "p-16",
    "body": ["padding: 4rem;", ""],
    "description": "p-16"
  },
  "p-20": {
    "prefix": "p-20",
    "body": ["padding: 5rem;", ""],
    "description": "p-20"
  },
  "p-24": {
    "prefix": "p-24",
    "body": ["padding: 6rem;", ""],
    "description": "p-24"
  },
  "p-32": {
    "prefix": "p-32",
    "body": ["padding: 8rem;", ""],
    "description": "p-32"
  },
  "p-40": {
    "prefix": "p-40",
    "body": ["padding: 10rem;", ""],
    "description": "p-40"
  },
  "p-48": {
    "prefix": "p-48",
    "body": ["padding: 12rem;", ""],
    "description": "p-48"
  },
  "p-56": {
    "prefix": "p-56",
    "body": ["padding: 14rem;", ""],
    "description": "p-56"
  },
  "p-64": {
    "prefix": "p-64",
    "body": ["padding: 16rem;", ""],
    "description": "p-64"
  },
}

Fix Readme Contributing section

Add lines for the contributing section in README

Add valid https links in README and CONTRIBUTING

VSCode Extension only accept valid https links in README, CHANGELOG and CONTRIBUTING

Ref: Publishing Extensions

Add README - Getting Started guide and Usage details

Add a README to easily get started with the extension.

Plan to write it based on the insipiration from,

sdras/vue-vscode-snippets
tailwindcss/intellisense

[SCSS] Add support for .scss files

Add the below changes to "contribute" in "package.json"

{
     {
        "language": "scss",
        "path": "./snippets/css-reset.json"
      },
      {
        "language": "scss",
        "path": "./snippets/pseudo.json"
      },
      {
        "language": "scss",
        "path": "./snippets/breakpoints.json"
      },
      {
        "language": "scss",
        "path": "./snippets/tailwind/layout.json"
      },
      {
        "language": "scss",
        "path": "./snippets/tailwind/flexbox.json"
      },
      {
        "language": "scss",
        "path": "./snippets/tailwind/grid.json"
      },
      {
        "language": "scss",
        "path": "./snippets/tailwind/spacing/padding.json"
      },
      {
        "language": "scss",
        "path": "./snippets/tailwind/spacing/margin.json"
      },
      {
        "language": "scss",
        "path": "./snippets/tailwind/spacing/space-between.json"
      },
      {
        "language": "scss",
        "path": "./snippets/1linelayouts/snippets.json"
      },
      {
        "language": "scss",
        "path": "./snippets/contributions/snippet.json"
      }
}

Add publish gitmoji

🚀 emoji to publish commit

Fix README Tailwind layout snippets

Add a seperate links for tailwind layout snippets

Fix Negative margin values

Add TOC to CONTRIBUTING

Add table of contents to contributing docs

Add Tailwind Spacing Margin

Add Tailwind Spacing - Margin

{

  "my-px": {
    "prefix": "my-px",
    "body": ["margin-top: 1px;", "margin-bottom: 1px;", ""],
    "description": "my-px"
  },
  "my-0": {
    "prefix": "my-0",
    "body": ["margin-top: 0;", "margin-bottom: 0;", ""],
    "description": "my-0"
  },
  "my-1": {
    "prefix": "my-1",
    "body": ["margin-top: 0.25rem;", "margin-bottom: 0.25rem;", ""],
    "description": "my-1"
  },
  "my-2": {
    "prefix": "my-2",
    "body": ["margin-top: 0.5rem;", "margin-bottom: 0.5rem;", ""],
    "description": "my-2"
  },
  "my-3": {
    "prefix": "my-3",
    "body": ["margin-top: 0.75rem;", "margin-bottom: 0.75rem;", ""],
    "description": "my-3"
  },
  "my-4": {
    "prefix": "my-4",
    "body": ["margin-top: 1rem;", "margin-bottom: 1rem;", ""],
    "description": "my-4"
  },
  "my-5": {
    "prefix": "my-5",
    "body": ["margin-top: 1.25rem;", "margin-bottom: 1.25rem;", ""],
    "description": "my-5"
  },
  "my-6": {
    "prefix": "my-6",
    "body": ["margin-top: 1.5rem;", "margin-bottom: 1.5rem;", ""],
    "description": "my-6"
  },
  "my-8": {
    "prefix": "my-8",
    "body": ["margin-top: 2rem;", "margin-bottom: 2rem;", ""],
    "description": "my-8"
  },
  "my-10": {
    "prefix": "my-10",
    "body": ["margin-top: 2.5rem;", "margin-bottom: 2.5rem;", ""],
    "description": "my-10"
  },
  "my-12": {
    "prefix": "my-12",
    "body": ["margin-top: 3rem;", "margin-bottom: 3rem;", ""],
    "description": "my-12"
  },
  "my-16": {
    "prefix": "my-16",
    "body": ["margin-top: 4rem;", "margin-bottom: 4rem;", ""],
    "description": "my-16"
  },
  "my-20": {
    "prefix": "my-20",
    "body": ["margin-top: 5rem;", "margin-bottom: 5rem;", ""],
    "description": "my-20"
  },
  "my-24": {
    "prefix": "my-24",
    "body": ["margin-top: 6rem;", "margin-bottom: 6rem;", ""],
    "description": "my-24"
  },
  "my-32": {
    "prefix": "my-32",
    "body": ["margin-top: 8rem;", "margin-bottom: 8rem;", ""],
    "description": "my-32"
  },
  "my-40": {
    "prefix": "my-40",
    "body": ["margin-top: 10rem;", "margin-bottom: 10rem;", ""],
    "description": "my-40"
  },
  "my-48": {
    "prefix": "my-48",
    "body": ["margin-top: 12rem;", "margin-bottom: 12rem;", ""],
    "description": "my-48"
  },
  "my-56": {
    "prefix": "my-56",
    "body": ["margin-top: 14rem;", "margin-bottom: 14rem;", ""],
    "description": "my-56"
  },
  "my-64": {
    "prefix": "my-64",
    "body": ["margin-top: 16rem;", "margin-bottom: 16rem;", ""],
    "description": "my-64"
  },

  "mx-px": {
    "prefix": "mx-px",
    "body": ["margin-right: 1px;", "margin-left: 1px;", ""],
    "description": "mx-px"
  },
  "mx-0": {
    "prefix": "mx-0",
    "body": ["margin-right: 0;", "margin-left: 0;", ""],
    "description": "mx-0"
  },
  "mx-1": {
    "prefix": "mx-1",
    "body": ["margin-right: 0.25rem;", "margin-left: 0.25rem;", ""],
    "description": "mx-1"
  },
  "mx-2": {
    "prefix": "mx-2",
    "body": ["margin-right: 0.5rem;", "margin-left: 0.5rem;", ""],
    "description": "mx-2"
  },
  "mx-3": {
    "prefix": "mx-3",
    "body": ["margin-right: 0.75rem;", "margin-left: 0.75rem;", ""],
    "description": "mx-3"
  },
  "mx-4": {
    "prefix": "mx-4",
    "body": ["margin-right: 1rem;", "margin-left: 1rem;", ""],
    "description": "mx-4"
  },
  "mx-5": {
    "prefix": "mx-5",
    "body": ["margin-right: 1.25rem;", "margin-left: 1.25rem;", ""],
    "description": "mx-5"
  },
  "mx-6": {
    "prefix": "mx-6",
    "body": ["margin-right: 1.5rem;", "margin-left: 1.5rem;", ""],
    "description": "mx-6"
  },
  "mx-8": {
    "prefix": "mx-8",
    "body": ["margin-right: 2rem;", "margin-left: 2rem;", ""],
    "description": "mx-8"
  },
  "mx-10": {
    "prefix": "mx-10",
    "body": ["margin-right: 2.5rem;", "margin-left: 2.5rem;", ""],
    "description": "mx-10"
  },
  "mx-12": {
    "prefix": "mx-12",
    "body": ["margin-right: 3rem;", "margin-left: 3rem;", ""],
    "description": "mx-12"
  },
  "mx-16": {
    "prefix": "mx-16",
    "body": ["margin-right: 4rem;", "margin-left: 4rem;", ""],
    "description": "mx-16"
  },
  "mx-20": {
    "prefix": "mx-20",
    "body": ["margin-right: 5rem;", "margin-left: 5rem;", ""],
    "description": "mx-20"
  },
  "mx-24": {
    "prefix": "mx-24",
    "body": ["margin-right: 6rem;", "margin-left: 6rem;", ""],
    "description": "mx-24"
  },
  "mx-32": {
    "prefix": "mx-32",
    "body": ["margin-right: 8rem;", "margin-left: 8rem;", ""],
    "description": "mx-32"
  },
  "mx-40": {
    "prefix": "mx-40",
    "body": ["margin-right: 10rem;", "margin-left: 10rem;", ""],
    "description": "mx-40"
  },
  "mx-48": {
    "prefix": "mx-48",
    "body": ["margin-right: 12rem;", "margin-left: 12rem;", ""],
    "description": "mx-48"
  },
  "mx-56": {
    "prefix": "mx-56",
    "body": ["margin-right: 14rem;", "margin-left: 14rem;", ""],
    "description": "mx-56"
  },
  "mx-64": {
    "prefix": "mx-64",
    "body": ["margin-right: 16rem;", "margin-left: 16rem;", ""],
    "description": "mx-64"
  },

  "mb-px": {
    "prefix": "mb-px",
    "body": ["margin-bottom: 1px;", ""],
    "description": "mb-px"
  },
  "mb-0": {
    "prefix": "mb-0",
    "body": ["margin-bottom: 0;", ""],
    "description": "mb-0"
  },
  "mb-1": {
    "prefix": "mb-1",
    "body": ["margin-bottom: 0.25rem;", ""],
    "description": "mb-1"
  },
  "mb-2": {
    "prefix": "mb-2",
    "body": ["margin-bottom: 0.5rem;", ""],
    "description": "mb-2"
  },
  "mb-3": {
    "prefix": "mb-3",
    "body": ["margin-bottom: 0.75rem;", ""],
    "description": "mb-3"
  },
  "mb-4": {
    "prefix": "mb-4",
    "body": ["margin-bottom: 1rem;", ""],
    "description": "mb-4"
  },
  "mb-5": {
    "prefix": "mb-5",
    "body": ["margin-bottom: 1.25rem;", ""],
    "description": "mb-5"
  },
  "mb-6": {
    "prefix": "mb-6",
    "body": ["margin-bottom: 1.5rem;", ""],
    "description": "mb-6"
  },
  "mb-8": {
    "prefix": "mb-8",
    "body": ["margin-bottom: 2rem;", ""],
    "description": "mb-8"
  },
  "mb-10": {
    "prefix": "mb-10",
    "body": ["margin-bottom: 2.5rem;", ""],
    "description": "mb-10"
  },
  "mb-12": {
    "prefix": "mb-12",
    "body": ["margin-bottom: 3rem;", ""],
    "description": "mb-12"
  },
  "mb-16": {
    "prefix": "mb-16",
    "body": ["margin-bottom: 4rem;", ""],
    "description": "mb-16"
  },
  "mb-20": {
    "prefix": "mb-20",
    "body": ["margin-bottom: 5rem;", ""],
    "description": "mb-20"
  },
  "mb-24": {
    "prefix": "mb-24",
    "body": ["margin-bottom: 6rem;", ""],
    "description": "mb-24"
  },
  "mb-32": {
    "prefix": "mb-32",
    "body": ["margin-bottom: 8rem;", ""],
    "description": "mb-32"
  },
  "mb-40": {
    "prefix": "mb-40",
    "body": ["margin-bottom: 10rem;", ""],
    "description": "mb-40"
  },
  "mb-48": {
    "prefix": "mb-48",
    "body": ["margin-bottom: 12rem;", ""],
    "description": "mb-48"
  },
  "mb-56": {
    "prefix": "mb-56",
    "body": ["margin-bottom: 14rem;", ""],
    "description": "mb-56"
  },
  "mb-64": {
    "prefix": "mb-64",
    "body": ["margin-bottom: 16rem;", ""],
    "description": "mb-64"
  },

  "mt-px": {
    "prefix": "mt-px",
    "body": ["margin-top: 1px;", ""],
    "description": "mt-px"
  },
  "mt-0": {
    "prefix": "mt-0",
    "body": ["margin-top: 0;", ""],
    "description": "mt-0"
  },
  "mt-1": {
    "prefix": "mt-1",
    "body": ["margin-top: 0.25rem;", ""],
    "description": "mt-1"
  },
  "mt-2": {
    "prefix": "mt-2",
    "body": ["margin-top: 0.5rem;", ""],
    "description": "mt-2"
  },
  "mt-3": {
    "prefix": "mt-3",
    "body": ["margin-top: 0.75rem;", ""],
    "description": "mt-3"
  },
  "mt-4": {
    "prefix": "mt-4",
    "body": ["margin-top: 1rem;", ""],
    "description": "mt-4"
  },
  "mt-5": {
    "prefix": "mt-5",
    "body": ["margin-top: 1.25rem;", ""],
    "description": "mt-5"
  },
  "mt-6": {
    "prefix": "mt-6",
    "body": ["margin-top: 1.5rem;", ""],
    "description": "mt-6"
  },
  "mt-8": {
    "prefix": "mt-8",
    "body": ["margin-top: 2rem;", ""],
    "description": "mt-8"
  },
  "mt-10": {
    "prefix": "mt-10",
    "body": ["margin-top: 2.5rem;", ""],
    "description": "mt-10"
  },
  "mt-12": {
    "prefix": "mt-12",
    "body": ["margin-top: 3rem;", ""],
    "description": "mt-12"
  },
  "mt-16": {
    "prefix": "mt-16",
    "body": ["margin-top: 4rem;", ""],
    "description": "mt-16"
  },
  "mt-20": {
    "prefix": "mt-20",
    "body": ["margin-top: 5rem;", ""],
    "description": "mt-20"
  },
  "mt-24": {
    "prefix": "mt-24",
    "body": ["margin-top: 6rem;", ""],
    "description": "mt-24"
  },
  "mt-32": {
    "prefix": "mt-32",
    "body": ["margin-top: 8rem;", ""],
    "description": "mt-32"
  },
  "mt-40": {
    "prefix": "mt-40",
    "body": ["margin-top: 10rem;", ""],
    "description": "mt-40"
  },
  "mt-48": {
    "prefix": "mt-48",
    "body": ["margin-top: 12rem;", ""],
    "description": "mt-48"
  },
  "mt-56": {
    "prefix": "mt-56",
    "body": ["margin-top: 14rem;", ""],
    "description": "mt-56"
  },
  "mt-64": {
    "prefix": "mt-64",
    "body": ["margin-top: 16rem;", ""],
    "description": "mt-64"
  },

  "mr-px": {
    "prefix": "mr-px",
    "body": ["margin-right: 1px;", ""],
    "description": "mr-px"
  },
  "mr-0": {
    "prefix": "mr-0",
    "body": ["margin-right: 0;", ""],
    "description": "mr-0"
  },
  "mr-1": {
    "prefix": "mr-1",
    "body": ["margin-right: 0.25rem;", ""],
    "description": "mr-1"
  },
  "mr-2": {
    "prefix": "mr-2",
    "body": ["margin-right: 0.5rem;", ""],
    "description": "mr-2"
  },
  "mr-3": {
    "prefix": "mr-3",
    "body": ["margin-right: 0.75rem;", ""],
    "description": "mr-3"
  },
  "mr-4": {
    "prefix": "mr-4",
    "body": ["margin-right: 1rem;", ""],
    "description": "mr-4"
  },
  "mr-5": {
    "prefix": "mr-5",
    "body": ["margin-right: 1.25rem;", ""],
    "description": "mr-5"
  },
  "mr-6": {
    "prefix": "mr-6",
    "body": ["margin-right: 1.5rem;", ""],
    "description": "mr-6"
  },
  "mr-8": {
    "prefix": "mr-8",
    "body": ["margin-right: 2rem;", ""],
    "description": "mr-8"
  },
  "mr-10": {
    "prefix": "mr-10",
    "body": ["margin-right: 2.5rem;", ""],
    "description": "mr-10"
  },
  "mr-12": {
    "prefix": "mr-12",
    "body": ["margin-right: 3rem;", ""],
    "description": "mr-12"
  },
  "mr-16": {
    "prefix": "mr-16",
    "body": ["margin-right: 4rem;", ""],
    "description": "mr-16"
  },
  "mr-20": {
    "prefix": "mr-20",
    "body": ["margin-right: 5rem;", ""],
    "description": "mr-20"
  },
  "mr-24": {
    "prefix": "mr-24",
    "body": ["margin-right: 6rem;", ""],
    "description": "mr-24"
  },
  "mr-32": {
    "prefix": "mr-32",
    "body": ["margin-right: 8rem;", ""],
    "description": "mr-32"
  },
  "mr-40": {
    "prefix": "mr-40",
    "body": ["margin-right: 10rem;", ""],
    "description": "mr-40"
  },
  "mr-48": {
    "prefix": "mr-48",
    "body": ["margin-right: 12rem;", ""],
    "description": "mr-48"
  },
  "mr-56": {
    "prefix": "mr-56",
    "body": ["margin-right: 14rem;", ""],
    "description": "mr-56"
  },
  "mr-64": {
    "prefix": "mr-64",
    "body": ["margin-right: 16rem;", ""],
    "description": "mr-64"
  },

  "ml-px": {
    "prefix": "ml-px",
    "body": ["margin-left: 1px;", ""],
    "description": "ml-px"
  },
  "ml-0": {
    "prefix": "ml-0",
    "body": ["margin-left: 0;", ""],
    "description": "ml-0"
  },
  "ml-1": {
    "prefix": "ml-1",
    "body": ["margin-left: 0.25rem;", ""],
    "description": "ml-1"
  },
  "ml-2": {
    "prefix": "ml-2",
    "body": ["margin-left: 0.5rem;", ""],
    "description": "ml-2"
  },
  "ml-3": {
    "prefix": "ml-3",
    "body": ["margin-left: 0.75rem;", ""],
    "description": "ml-3"
  },
  "ml-4": {
    "prefix": "ml-4",
    "body": ["margin-left: 1rem;", ""],
    "description": "ml-4"
  },
  "ml-5": {
    "prefix": "ml-5",
    "body": ["margin-left: 1.25rem;", ""],
    "description": "ml-5"
  },
  "ml-6": {
    "prefix": "ml-6",
    "body": ["margin-left: 1.5rem;", ""],
    "description": "ml-6"
  },
  "ml-8": {
    "prefix": "ml-8",
    "body": ["margin-left: 2rem;", ""],
    "description": "ml-8"
  },
  "ml-10": {
    "prefix": "ml-10",
    "body": ["margin-left: 2.5rem;", ""],
    "description": "ml-10"
  },
  "ml-12": {
    "prefix": "ml-12",
    "body": ["margin-left: 3rem;", ""],
    "description": "ml-12"
  },
  "ml-16": {
    "prefix": "ml-16",
    "body": ["margin-left: 4rem;", ""],
    "description": "ml-16"
  },
  "ml-20": {
    "prefix": "ml-20",
    "body": ["margin-left: 5rem;", ""],
    "description": "ml-20"
  },
  "ml-24": {
    "prefix": "ml-24",
    "body": ["margin-left: 6rem;", ""],
    "description": "ml-24"
  },
  "ml-32": {
    "prefix": "ml-32",
    "body": ["margin-left: 8rem;", ""],
    "description": "ml-32"
  },
  "ml-40": {
    "prefix": "ml-40",
    "body": ["margin-left: 10rem;", ""],
    "description": "ml-40"
  },
  "ml-48": {
    "prefix": "ml-48",
    "body": ["margin-left: 12rem;", ""],
    "description": "ml-48"
  },
  "ml-56": {
    "prefix": "ml-56",
    "body": ["margin-left: 14rem;", ""],
    "description": "ml-56"
  },
  "ml-64": {
    "prefix": "ml-64",
    "body": ["margin-left: 16rem;", ""],
    "description": "ml-64"
  },

  "m-px": {
    "prefix": "m-px",
    "body": ["margin: 1px;", ""],
    "description": "m-px"
  },
  "m-0": {
    "prefix": "m-0",
    "body": ["margin: 0;", ""],
    "description": "m-0"
  },
  "m-1": {
    "prefix": "m-1",
    "body": ["margin: 0.25rem;", ""],
    "description": "m-1"
  },
  "m-2": {
    "prefix": "m-2",
    "body": ["margin: 0.5rem;", ""],
    "description": "m-2"
  },
  "m-3": {
    "prefix": "m-3",
    "body": ["margin: 0.75rem;", ""],
    "description": "m-3"
  },
  "m-4": {
    "prefix": "m-4",
    "body": ["margin: 1rem;", ""],
    "description": "m-4"
  },
  "m-5": {
    "prefix": "m-5",
    "body": ["margin: 1.25rem;", ""],
    "description": "m-5"
  },
  "m-6": {
    "prefix": "m-6",
    "body": ["margin: 1.5rem;", ""],
    "description": "m-6"
  },
  "m-8": {
    "prefix": "m-8",
    "body": ["margin: 2rem;", ""],
    "description": "m-8"
  },
  "m-10": {
    "prefix": "m-10",
    "body": ["margin: 2.5rem;", ""],
    "description": "m-10"
  },
  "m-12": {
    "prefix": "m-12",
    "body": ["margin: 3rem;", ""],
    "description": "m-12"
  },
  "m-16": {
    "prefix": "m-16",
    "body": ["margin: 4rem;", ""],
    "description": "m-16"
  },
  "m-20": {
    "prefix": "m-20",
    "body": ["margin: 5rem;", ""],
    "description": "m-20"
  },
  "m-24": {
    "prefix": "m-24",
    "body": ["margin: 6rem;", ""],
    "description": "m-24"
  },
  "m-32": {
    "prefix": "m-32",
    "body": ["margin: 8rem;", ""],
    "description": "m-32"
  },
  "m-40": {
    "prefix": "m-40",
    "body": ["margin: 10rem;", ""],
    "description": "m-40"
  },
  "m-48": {
    "prefix": "m-48",
    "body": ["margin: 12rem;", ""],
    "description": "m-48"
  },
  "m-56": {
    "prefix": "m-56",
    "body": ["margin: 14rem;", ""],
    "description": "m-56"
  },
  "m-64": {
    "prefix": "m-64",
    "body": ["margin: 16rem;", ""],
    "description": "m-64"
  },

  "-my-px": {
    "prefix": "-my-px",
    "body": ["margin-top: -1px;", "margin-bottom: -1px;", ""],
    "description": "-my-px"
  },
  "-my-1": {
    "prefix": "-my-1",
    "body": ["margin-top: -0.25rem;", "margin-bottom: -0.25rem;", ""],
    "description": "-my-1"
  },
  "-my-2": {
    "prefix": "-my-2",
    "body": ["margin-top: -0.5rem;", "margin-bottom: -0.5rem;", ""],
    "description": "-my-2"
  },
  "-my-3": {
    "prefix": "-my-3",
    "body": ["margin-top: -0.75rem;", "margin-bottom: -0.75rem;", ""],
    "description": "-my-3"
  },
  "-my-4": {
    "prefix": "-my-4",
    "body": ["margin-top: -1rem;", "margin-bottom: -1rem;", ""],
    "description": "-my-4"
  },
  "-my-5": {
    "prefix": "-my-5",
    "body": ["margin-top: -1.25rem;", "margin-bottom: -1.25rem;", ""],
    "description": "-my-5"
  },
  "-my-6": {
    "prefix": "-my-6",
    "body": ["margin-top: -1.5rem;", "margin-bottom: -1.5rem;", ""],
    "description": "-my-6"
  },
  "-my-8": {
    "prefix": "-my-8",
    "body": ["margin-top: -2rem;", "margin-bottom: -2rem;", ""],
    "description": "-my-8"
  },
  "-my-10": {
    "prefix": "-my-10",
    "body": ["margin-top: -2.5rem;", "margin-bottom: -2.5rem;", ""],
    "description": "-my-10"
  },
  "-my-12": {
    "prefix": "-my-12",
    "body": ["margin-top: -3rem;", "margin-bottom: -3rem;", ""],
    "description": "-my-12"
  },
  "-my-16": {
    "prefix": "-my-16",
    "body": ["margin-top: -4rem;", "margin-bottom: -4rem;", ""],
    "description": "-my-16"
  },
  "-my-20": {
    "prefix": "-my-20",
    "body": ["margin-top: -5rem;", "margin-bottom: -5rem;", ""],
    "description": "-my-20"
  },
  "-my-24": {
    "prefix": "-my-24",
    "body": ["margin-top: -6rem;", "margin-bottom: -6rem;", ""],
    "description": "-my-24"
  },
  "-my-32": {
    "prefix": "-my-32",
    "body": ["margin-top: -8rem;", "margin-bottom: -8rem;", ""],
    "description": "-my-32"
  },
  "-my-40": {
    "prefix": "-my-40",
    "body": ["margin-top: -10rem;", "margin-bottom: -10rem;", ""],
    "description": "-my-40"
  },
  "-my-48": {
    "prefix": "-my-48",
    "body": ["margin-top: -12rem;", "margin-bottom: -12rem;", ""],
    "description": "-my-48"
  },
  "-my-56": {
    "prefix": "-my-56",
    "body": ["margin-top: -14rem;", "margin-bottom: -14rem;", ""],
    "description": "-my-56"
  },
  "-my-64": {
    "prefix": "-my-64",
    "body": ["margin-top: -16rem;", "margin-bottom: -16rem;", ""],
    "description": "-my-64"
  },

  "-mx-px": {
    "prefix": "-mx-px",
    "body": ["margin-right: -1px;", "margin-left: -1px;", ""],
    "description": "-mx-px"
  },
  "-mx-1": {
    "prefix": "-mx-1",
    "body": ["margin-right: -0.25rem;", "margin-left: -0.25rem;", ""],
    "description": "-mx-1"
  },
  "-mx-2": {
    "prefix": "-mx-2",
    "body": ["margin-right: -0.5rem;", "margin-left: -0.5rem;", ""],
    "description": "-mx-2"
  },
  "-mx-3": {
    "prefix": "-mx-3",
    "body": ["margin-right: -0.75rem;", "margin-left: -0.75rem;", ""],
    "description": "-mx-3"
  },
  "-mx-4": {
    "prefix": "-mx-4",
    "body": ["margin-right: -1rem;", "margin-left: -1rem;", ""],
    "description": "-mx-4"
  },
  "-mx-5": {
    "prefix": "-mx-5",
    "body": ["margin-right: -1.25rem;", "margin-left: -1.25rem;", ""],
    "description": "-mx-5"
  },
  "-mx-6": {
    "prefix": "-mx-6",
    "body": ["margin-right: -1.5rem;", "margin-left: -1.5rem;", ""],
    "description": "-mx-6"
  },
  "-mx-8": {
    "prefix": "-mx-8",
    "body": ["margin-right: -2rem;", "margin-left: -2rem;", ""],
    "description": "-mx-8"
  },
  "-mx-10": {
    "prefix": "-mx-10",
    "body": ["margin-right: -2.5rem;", "margin-left: -2.5rem;", ""],
    "description": "-mx-10"
  },
  "-mx-12": {
    "prefix": "-mx-12",
    "body": ["margin-right: -3rem;", "margin-left: -3rem;", ""],
    "description": "-mx-12"
  },
  "-mx-16": {
    "prefix": "-mx-16",
    "body": ["margin-right: -4rem;", "margin-left: -4rem;", ""],
    "description": "-mx-16"
  },
  "-mx-20": {
    "prefix": "-mx-20",
    "body": ["margin-right: -5rem;", "margin-left: -5rem;", ""],
    "description": "-mx-20"
  },
  "-mx-24": {
    "prefix": "-mx-24",
    "body": ["margin-right: -6rem;", "margin-left: -6rem;", ""],
    "description": "-mx-24"
  },
  "-mx-32": {
    "prefix": "-mx-32",
    "body": ["margin-right: -8rem;", "margin-left: -8rem;", ""],
    "description": "-mx-32"
  },
  "-mx-40": {
    "prefix": "-mx-40",
    "body": ["margin-right: -10rem;", "margin-left: -10rem;", ""],
    "description": "-mx-40"
  },
  "-mx-48": {
    "prefix": "-mx-48",
    "body": ["margin-right: -12rem;", "margin-left: -12rem;", ""],
    "description": "-mx-48"
  },
  "-mx-56": {
    "prefix": "-mx-56",
    "body": ["margin-right: -14rem;", "margin-left: -14rem;", ""],
    "description": "-mx-56"
  },
  "-mx-64": {
    "prefix": "-mx-64",
    "body": ["margin-right: -16rem;", "margin-left: -16rem;", ""],
    "description": "-mx-64"
  },

  "-mb-px": {
    "prefix": "-mb-px",
    "body": ["margin-bottom: -1px;", ""],
    "description": "-mb-px"
  },
  "-mb-1": {
    "prefix": "-mb-1",
    "body": ["margin-bottom: -0.25rem;", ""],
    "description": "-mb-1"
  },
  "-mb-2": {
    "prefix": "-mb-2",
    "body": ["margin-bottom: -0.5rem;", ""],
    "description": "-mb-2"
  },
  "-mb-3": {
    "prefix": "-mb-3",
    "body": ["margin-bottom: -0.75rem;", ""],
    "description": "-mb-3"
  },
  "-mb-4": {
    "prefix": "-mb-4",
    "body": ["margin-bottom: -1rem;", ""],
    "description": "-mb-4"
  },
  "-mb-5": {
    "prefix": "-mb-5",
    "body": ["margin-bottom: -1.25rem;", ""],
    "description": "-mb-5"
  },
  "-mb-6": {
    "prefix": "-mb-6",
    "body": ["margin-bottom: -1.5rem;", ""],
    "description": "-mb-6"
  },
  "-mb-8": {
    "prefix": "-mb-8",
    "body": ["margin-bottom: -2rem;", ""],
    "description": "-mb-8"
  },
  "-mb-10": {
    "prefix": "-mb-10",
    "body": ["margin-bottom: -2.5rem;", ""],
    "description": "-mb-10"
  },
  "-mb-12": {
    "prefix": "-mb-12",
    "body": ["margin-bottom: -3rem;", ""],
    "description": "-mb-12"
  },
  "-mb-16": {
    "prefix": "-mb-16",
    "body": ["margin-bottom: -4rem;", ""],
    "description": "-mb-16"
  },
  "-mb-20": {
    "prefix": "-mb-20",
    "body": ["margin-bottom: -5rem;", ""],
    "description": "-mb-20"
  },
  "-mb-24": {
    "prefix": "-mb-24",
    "body": ["margin-bottom: -6rem;", ""],
    "description": "-mb-24"
  },
  "-mb-32": {
    "prefix": "-mb-32",
    "body": ["margin-bottom: -8rem;", ""],
    "description": "-mb-32"
  },
  "-mb-40": {
    "prefix": "-mb-40",
    "body": ["margin-bottom: -10rem;", ""],
    "description": "-mb-40"
  },
  "-mb-48": {
    "prefix": "-mb-48",
    "body": ["margin-bottom: -12rem;", ""],
    "description": "-mb-48"
  },
  "-mb-56": {
    "prefix": "-mb-56",
    "body": ["margin-bottom: -14rem;", ""],
    "description": "-mb-56"
  },
  "-mb-64": {
    "prefix": "-mb-64",
    "body": ["margin-bottom: -16rem;", ""],
    "description": "-mb-64"
  },

  "-mt-px": {
    "prefix": "-mt-px",
    "body": ["margin-top: -1px;", ""],
    "description": "-mt-px"
  },
  "-mt-1": {
    "prefix": "-mt-1",
    "body": ["margin-top: -0.25rem;", ""],
    "description": "-mt-1"
  },
  "-mt-2": {
    "prefix": "-mt-2",
    "body": ["margin-top: -0.5rem;", ""],
    "description": "-mt-2"
  },
  "-mt-3": {
    "prefix": "-mt-3",
    "body": ["margin-top: -0.75rem;", ""],
    "description": "-mt-3"
  },
  "-mt-4": {
    "prefix": "-mt-4",
    "body": ["margin-top: -1rem;", ""],
    "description": "-mt-4"
  },
  "-mt-5": {
    "prefix": "-mt-5",
    "body": ["margin-top: -1.25rem;", ""],
    "description": "-mt-5"
  },
  "-mt-6": {
    "prefix": "-mt-6",
    "body": ["margin-top: -1.5rem;", ""],
    "description": "-mt-6"
  },
  "-mt-8": {
    "prefix": "-mt-8",
    "body": ["margin-top: -2rem;", ""],
    "description": "-mt-8"
  },
  "-mt-10": {
    "prefix": "-mt-10",
    "body": ["margin-top: -2.5rem;", ""],
    "description": "-mt-10"
  },
  "-mt-12": {
    "prefix": "-mt-12",
    "body": ["margin-top: -3rem;", ""],
    "description": "-mt-12"
  },
  "-mt-16": {
    "prefix": "-mt-16",
    "body": ["margin-top: -4rem;", ""],
    "description": "-mt-16"
  },
  "-mt-20": {
    "prefix": "-mt-20",
    "body": ["margin-top: -5rem;", ""],
    "description": "-mt-20"
  },
  "-mt-24": {
    "prefix": "-mt-24",
    "body": ["margin-top: -6rem;", ""],
    "description": "-mt-24"
  },
  "-mt-32": {
    "prefix": "-mt-32",
    "body": ["margin-top: -8rem;", ""],
    "description": "-mt-32"
  },
  "-mt-40": {
    "prefix": "-mt-40",
    "body": ["margin-top: -10rem;", ""],
    "description": "-mt-40"
  },
  "-mt-48": {
    "prefix": "-mt-48",
    "body": ["margin-top: -12rem;", ""],
    "description": "-mt-48"
  },
  "-mt-56": {
    "prefix": "-mt-56",
    "body": ["margin-top: -14rem;", ""],
    "description": "-mt-56"
  },
  "-mt-64": {
    "prefix": "-mt-64",
    "body": ["margin-top: -16rem;", ""],
    "description": "-mt-64"
  },

  "-mr-px": {
    "prefix": "-mr-px",
    "body": ["margin-right: -1px;", ""],
    "description": "-mr-px"
  },
  "-mr-1": {
    "prefix": "-mr-1",
    "body": ["margin-right: -0.25rem;", ""],
    "description": "-mr-1"
  },
  "-mr-2": {
    "prefix": "-mr-2",
    "body": ["margin-right: -0.5rem;", ""],
    "description": "-mr-2"
  },
  "-mr-3": {
    "prefix": "-mr-3",
    "body": ["margin-right: -0.75rem;", ""],
    "description": "-mr-3"
  },
  "-mr-4": {
    "prefix": "-mr-4",
    "body": ["margin-right: -1rem;", ""],
    "description": "-mr-4"
  },
  "-mr-5": {
    "prefix": "-mr-5",
    "body": ["margin-right: -1.25rem;", ""],
    "description": "-mr-5"
  },
  "-mr-6": {
    "prefix": "-mr-6",
    "body": ["margin-right: -1.5rem;", ""],
    "description": "-mr-6"
  },
  "-mr-8": {
    "prefix": "-mr-8",
    "body": ["margin-right: -2rem;", ""],
    "description": "-mr-8"
  },
  "-mr-10": {
    "prefix": "-mr-10",
    "body": ["margin-right: -2.5rem;", ""],
    "description": "-mr-10"
  },
  "-mr-12": {
    "prefix": "-mr-12",
    "body": ["margin-right: -3rem;", ""],
    "description": "-mr-12"
  },
  "-mr-16": {
    "prefix": "-mr-16",
    "body": ["margin-right: -4rem;", ""],
    "description": "-mr-16"
  },
  "-mr-20": {
    "prefix": "-mr-20",
    "body": ["margin-right: -5rem;", ""],
    "description": "-mr-20"
  },
  "-mr-24": {
    "prefix": "-mr-24",
    "body": ["margin-right: -6rem;", ""],
    "description": "-mr-24"
  },
  "-mr-32": {
    "prefix": "-mr-32",
    "body": ["margin-right: -8rem;", ""],
    "description": "-mr-32"
  },
  "-mr-40": {
    "prefix": "-mr-40",
    "body": ["margin-right: -10rem;", ""],
    "description": "-mr-40"
  },
  "-mr-48": {
    "prefix": "-mr-48",
    "body": ["margin-right: -12rem;", ""],
    "description": "-mr-48"
  },
  "-mr-56": {
    "prefix": "-mr-56",
    "body": ["margin-right: -14rem;", ""],
    "description": "-mr-56"
  },
  "-mr-64": {
    "prefix": "-mr-64",
    "body": ["margin-right: -16rem;", ""],
    "description": "-mr-64"
  },

  "-ml-px": {
    "prefix": "-ml-px",
    "body": ["margin-left: -1px;", ""],
    "description": "-ml-px"
  },
  "-ml-1": {
    "prefix": "-ml-1",
    "body": ["margin-left: -0.25rem;", ""],
    "description": "-ml-1"
  },
  "-ml-2": {
    "prefix": "-ml-2",
    "body": ["margin-left: -0.5rem;", ""],
    "description": "-ml-2"
  },
  "-ml-3": {
    "prefix": "-ml-3",
    "body": ["margin-left: -0.75rem;", ""],
    "description": "-ml-3"
  },
  "-ml-4": {
    "prefix": "-ml-4",
    "body": ["margin-left: -1rem;", ""],
    "description": "-ml-4"
  },
  "-ml-5": {
    "prefix": "-ml-5",
    "body": ["margin-left: -1.25rem;", ""],
    "description": "-ml-5"
  },
  "-ml-6": {
    "prefix": "-ml-6",
    "body": ["margin-left: -1.5rem;", ""],
    "description": "-ml-6"
  },
  "-ml-8": {
    "prefix": "-ml-8",
    "body": ["margin-left: -2rem;", ""],
    "description": "-ml-8"
  },
  "-ml-10": {
    "prefix": "-ml-10",
    "body": ["margin-left: -2.5rem;", ""],
    "description": "-ml-10"
  },
  "-ml-12": {
    "prefix": "-ml-12",
    "body": ["margin-left: -3rem;", ""],
    "description": "-ml-12"
  },
  "-ml-16": {
    "prefix": "-ml-16",
    "body": ["margin-left: -4rem;", ""],
    "description": "-ml-16"
  },
  "-ml-20": {
    "prefix": "-ml-20",
    "body": ["margin-left: -5rem;", ""],
    "description": "-ml-20"
  },
  "-ml-24": {
    "prefix": "-ml-24",
    "body": ["margin-left: -6rem;", ""],
    "description": "-ml-24"
  },
  "-ml-32": {
    "prefix": "-ml-32",
    "body": ["margin-left: -8rem;", ""],
    "description": "-ml-32"
  },
  "-ml-40": {
    "prefix": "-ml-40",
    "body": ["margin-left: -10rem;", ""],
    "description": "-ml-40"
  },
  "-ml-48": {
    "prefix": "-ml-48",
    "body": ["margin-left: -12rem;", ""],
    "description": "-ml-48"
  },
  "-ml-56": {
    "prefix": "-ml-56",
    "body": ["margin-left: -14rem;", ""],
    "description": "-ml-56"
  },
  "-ml-64": {
    "prefix": "-ml-64",
    "body": ["margin-left: -16rem;", ""],
    "description": "-ml-64"
  },

  "-m-px": {
    "prefix": "-m-px",
    "body": ["margin: 1px;", ""],
    "description": "-m-px"
  },
  "-m-1": {
    "prefix": "-m-1",
    "body": ["margin: 0.25rem;", ""],
    "description": "-m-1"
  },
  "-m-2": {
    "prefix": "-m-2",
    "body": ["margin: 0.5rem;", ""],
    "description": "-m-2"
  },
  "-m-3": {
    "prefix": "-m-3",
    "body": ["margin: 0.75rem;", ""],
    "description": "-m-3"
  },
  "-m-4": {
    "prefix": "-m-4",
    "body": ["margin: 1rem;", ""],
    "description": "-m-4"
  },
  "-m-5": {
    "prefix": "-m-5",
    "body": ["margin: 1.25rem;", ""],
    "description": "-m-5"
  },
  "-m-6": {
    "prefix": "-m-6",
    "body": ["margin: 1.5rem;", ""],
    "description": "-m-6"
  },
  "-m-8": {
    "prefix": "-m-8",
    "body": ["margin: 2rem;", ""],
    "description": "-m-8"
  },
  "-m-10": {
    "prefix": "-m-10",
    "body": ["margin: 2.5rem;", ""],
    "description": "-m-10"
  },
  "-m-12": {
    "prefix": "-m-12",
    "body": ["margin: 3rem;", ""],
    "description": "-m-12"
  },
  "-m-16": {
    "prefix": "-m-16",
    "body": ["margin: 4rem;", ""],
    "description": "-m-16"
  },
  "-m-20": {
    "prefix": "-m-20",
    "body": ["margin: 5rem;", ""],
    "description": "-m-20"
  },
  "-m-24": {
    "prefix": "-m-24",
    "body": ["margin: 6rem;", ""],
    "description": "-m-24"
  },
  "-m-32": {
    "prefix": "-m-32",
    "body": ["margin: 8rem;", ""],
    "description": "-m-32"
  },
  "-m-40": {
    "prefix": "-m-40",
    "body": ["margin: 10rem;", ""],
    "description": "-m-40"
  },
  "-m-48": {
    "prefix": "-m-48",
    "body": ["margin: 12rem;", ""],
    "description": "-m-48"
  },
  "-m-56": {
    "prefix": "-m-56",
    "body": ["margin: 14rem;", ""],
    "description": "-m-56"
  },
  "-m-64": {
    "prefix": "-m-64",
    "body": ["margin: 16rem;", ""],
    "description": "-m-64"
  },
  "my-auto": {
    "prefix": "my-auto",
    "body": ["margin-top: auto;", "margin-bottom: auto;", ""],
    "description": "my-auto"
  },
  "mx-auto": {
    "prefix": "mx-auto",
    "body": ["margin-right: auto;", "margin-left: auto;", ""],
    "description": "mx-auto"
  },
  "mt-auto": {
    "prefix": "mt-auto",
    "body": ["margin-top: auto;", ""],
    "description": "mt-auto"
  },
  "mr-auto": {
    "prefix": "mr-auto",
    "body": ["margin-right: auto;", ""],
    "description": "mr-auto"
  },
  "mb-auto": {
    "prefix": "mb-auto",
    "body": ["margin-bottom: auto;", ""],
    "description": "mb-auto"
  },
  "ml-auto": {
    "prefix": "ml-auto",
    "body": ["margin-left: auto;", ""],
    "description": "ml-auto"
  },
  "m-auto": {
    "prefix": "m-auto",
    "body": ["margin: auto;", ""],
    "description": "m-auto"
  }
}

Re-Structure Tailwind README

Move all the Tailwind Snippets to seperate md files for clarity.

Add CONTRIBUTING Docs

Ref: Chakra UI Contributing Docs

Add Tailwind spacing Space

Add Tailwind Spacing - Space

{
  "-space-y-reverse-px": {
    "prefix": "-space-y-reverse-px",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -1px;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-px"
  },
  "-space-y-reverse-1": {
    "prefix": "-space-y-reverse-1",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -0.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-1"
  },
  "-space-y-reverse-2": {
    "prefix": "-space-y-reverse-2",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -0.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-2"
  },
  "-space-y-reverse-3": {
    "prefix": "-space-y-reverse-3",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -0.75rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-3"
  },
  "-space-y-reverse-4": {
    "prefix": "-space-y-reverse-4",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -1rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-4"
  },
  "-space-y-reverse-5": {
    "prefix": "-space-y-reverse-5",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -1.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-5"
  },
  "-space-y-reverse-6": {
    "prefix": "-space-y-reverse-6",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -1.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-6"
  },
  "-space-y-reverse-8": {
    "prefix": "-space-y-reverse-8",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -2rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-8"
  },
  "-space-y-reverse-10": {
    "prefix": "-space-y-reverse-10",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -2.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-10"
  },
  "-space-y-reverse-12": {
    "prefix": "-space-y-reverse-12",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -3rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-12"
  },
  "-space-y-reverse-16": {
    "prefix": "-space-y-reverse-16",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -4rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-16"
  },
  "-space-y-reverse-20": {
    "prefix": "-space-y-reverse-20",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-20"
  },
  "-space-y-reverse-24": {
    "prefix": "-space-y-reverse-24",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -6rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-24"
  },
  "-space-y-reverse-32": {
    "prefix": "-space-y-reverse-32",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -8rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-32"
  },
  "-space-y-reverse-40": {
    "prefix": "-space-y-reverse-40",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -10rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-40"
  },
  "-space-y-reverse-48": {
    "prefix": "-space-y-reverse-48",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -12rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-48"
  },
  "-space-y-reverse-56": {
    "prefix": "-space-y-reverse-56",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -14rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-56"
  },
  "-space-y-reverse-64": {
    "prefix": "-space-y-reverse-64",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: -16rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-reverse-64"
  },

  "-space-x-reverse-px": {
    "prefix": "-space-x-reverse-px",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -1px;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-px"
  },
  "-space-x-reverse-1": {
    "prefix": "-space-x-reverse-1",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -0.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-1"
  },
  "-space-x-reverse-2": {
    "prefix": "-space-x-reverse-2",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -0.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-2"
  },
  "-space-x-reverse-3": {
    "prefix": "-space-x-reverse-3",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -0.75rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-3"
  },
  "-space-x-reverse-4": {
    "prefix": "-space-x-reverse-4",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -1rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-4"
  },
  "-space-x-reverse-5": {
    "prefix": "-space-x-reverse-5",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -1.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-5"
  },
  "-space-x-reverse-6": {
    "prefix": "-space-x-reverse-6",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -1.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-6"
  },
  "-space-x-reverse-8": {
    "prefix": "-space-x-reverse-8",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -2rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-8"
  },
  "-space-x-reverse-10": {
    "prefix": "-space-x-reverse-10",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -2.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-10"
  },
  "-space-x-reverse-12": {
    "prefix": "-space-x-reverse-12",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -3rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-12"
  },
  "-space-x-reverse-16": {
    "prefix": "-space-x-reverse-16",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -4rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-16"
  },
  "-space-x-reverse-20": {
    "prefix": "-space-x-reverse-20",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-20"
  },
  "-space-x-reverse-24": {
    "prefix": "-space-x-reverse-24",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -6rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-24"
  },
  "-space-x-reverse-32": {
    "prefix": "-space-x-reverse-32",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -8rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-32"
  },
  "-space-x-reverse-40": {
    "prefix": "-space-x-reverse-40",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -10rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-40"
  },
  "-space-x-reverse-48": {
    "prefix": "-space-x-reverse-48",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -12rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-48"
  },
  "-space-x-reverse-56": {
    "prefix": "-space-x-reverse-56",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -14rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-56"
  },
  "-space-x-reverse-64": {
    "prefix": "-space-x-reverse-64",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: -16rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-reverse-64"
  },

  "space-y-reverse-px": {
    "prefix": "space-y-reverse-px",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 1px;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-px"
  },
  "space-y-reverse-0": {
    "prefix": "space-y-reverse-0",
    "body": [".${1:classname} > * + * {", "margin-bottom: 0;", "}", "", "${0}"],
    "description": "space-y-reverse-0"
  },
  "space-y-reverse-1": {
    "prefix": "space-y-reverse-1",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 0.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-1"
  },
  "space-y-reverse-2": {
    "prefix": "space-y-reverse-2",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 0.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-2"
  },
  "space-y-reverse-3": {
    "prefix": "space-y-reverse-3",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 0.75rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-3"
  },
  "space-y-reverse-4": {
    "prefix": "space-y-reverse-4",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 1rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-4"
  },
  "space-y-reverse-5": {
    "prefix": "space-y-reverse-5",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 1.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-5"
  },
  "space-y-reverse-6": {
    "prefix": "space-y-reverse-6",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 1.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-6"
  },
  "space-y-reverse-8": {
    "prefix": "space-y-reverse-8",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 2rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-8"
  },
  "space-y-reverse-10": {
    "prefix": "space-y-reverse-10",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 2.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-10"
  },
  "space-y-reverse-12": {
    "prefix": "space-y-reverse-12",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 3rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-12"
  },
  "space-y-reverse-16": {
    "prefix": "space-y-reverse-16",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 4rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-16"
  },
  "space-y-reverse-20": {
    "prefix": "space-y-reverse-20",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-20"
  },
  "space-y-reverse-24": {
    "prefix": "space-y-reverse-24",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 6rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-24"
  },
  "space-y-reverse-32": {
    "prefix": "space-y-reverse-32",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 8rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-32"
  },
  "space-y-reverse-40": {
    "prefix": "space-y-reverse-40",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 10rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-40"
  },
  "space-y-reverse-48": {
    "prefix": "space-y-reverse-48",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 12rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-48"
  },
  "space-y-reverse-56": {
    "prefix": "space-y-reverse-56",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 14rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-56"
  },
  "space-y-reverse-64": {
    "prefix": "space-y-reverse-64",
    "body": [
      ".${1:classname} > * + * {",
      "margin-bottom: 16rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-reverse-64"
  },

  "space-x-reverse-px": {
    "prefix": "space-x-reverse-px",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 1px;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-px"
  },
  "space-x-reverse-0": {
    "prefix": "space-x-reverse-0",
    "body": [".${1:classname} > * + * {", "margin-right: 0;", "}", "", "${0}"],
    "description": "space-x-reverse-0"
  },
  "space-x-reverse-1": {
    "prefix": "space-x-reverse-1",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 0.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-1"
  },
  "space-x-reverse-2": {
    "prefix": "space-x-reverse-2",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 0.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-2"
  },
  "space-x-reverse-3": {
    "prefix": "space-x-reverse-3",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 0.75rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-3"
  },
  "space-x-reverse-4": {
    "prefix": "space-x-reverse-4",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 1rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-4"
  },
  "space-x-reverse-5": {
    "prefix": "space-x-reverse-5",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 1.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-5"
  },
  "space-x-reverse-6": {
    "prefix": "space-x-reverse-6",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 1.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-6"
  },
  "space-x-reverse-8": {
    "prefix": "space-x-reverse-8",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 2rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-8"
  },
  "space-x-reverse-10": {
    "prefix": "space-x-reverse-10",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 2.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-10"
  },
  "space-x-reverse-12": {
    "prefix": "space-x-reverse-12",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 3rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-12"
  },
  "space-x-reverse-16": {
    "prefix": "space-x-reverse-16",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 4rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-16"
  },
  "space-x-reverse-20": {
    "prefix": "space-x-reverse-20",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-20"
  },
  "space-x-reverse-24": {
    "prefix": "space-x-reverse-24",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 6rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-24"
  },
  "space-x-reverse-32": {
    "prefix": "space-x-reverse-32",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 8rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-32"
  },
  "space-x-reverse-40": {
    "prefix": "space-x-reverse-40",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 10rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-40"
  },
  "space-x-reverse-48": {
    "prefix": "space-x-reverse-48",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 12rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-48"
  },
  "space-x-reverse-56": {
    "prefix": "space-x-reverse-56",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 14rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-56"
  },
  "space-x-reverse-64": {
    "prefix": "space-x-reverse-64",
    "body": [
      ".${1:classname} > * + * {",
      "margin-right: 16rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-reverse-64"
  },

  "-space-y-px": {
    "prefix": "-space-y-px",
    "body": [".${1:classname} > * + * {", "margin-top: -1px;", "}", "", "${0}"],
    "description": "-space-y-px"
  },
  "-space-y-1": {
    "prefix": "-space-y-1",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -0.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-1"
  },
  "-space-y-2": {
    "prefix": "-space-y-2",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -0.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-2"
  },
  "-space-y-3": {
    "prefix": "-space-y-3",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -0.75rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-3"
  },
  "-space-y-4": {
    "prefix": "-space-y-4",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -1rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-4"
  },
  "-space-y-5": {
    "prefix": "-space-y-5",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -1.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-5"
  },
  "-space-y-6": {
    "prefix": "-space-y-6",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -1.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-6"
  },
  "-space-y-8": {
    "prefix": "-space-y-8",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -2rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-8"
  },
  "-space-y-10": {
    "prefix": "-space-y-10",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -2.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-10"
  },
  "-space-y-12": {
    "prefix": "-space-y-12",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -3rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-12"
  },
  "-space-y-16": {
    "prefix": "-space-y-16",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -4rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-16"
  },
  "-space-y-20": {
    "prefix": "-space-y-20",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-20"
  },
  "-space-y-24": {
    "prefix": "-space-y-24",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -6rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-24"
  },
  "-space-y-32": {
    "prefix": "-space-y-32",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -8rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-32"
  },
  "-space-y-40": {
    "prefix": "-space-y-40",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -10rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-40"
  },
  "-space-y-48": {
    "prefix": "-space-y-48",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -12rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-48"
  },
  "-space-y-56": {
    "prefix": "-space-y-56",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -14rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-56"
  },
  "-space-y-64": {
    "prefix": "-space-y-64",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: -16rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-y-64"
  },

  "-space-x-px": {
    "prefix": "-space-x-px",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -1px;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-px"
  },
  "-space-x-1": {
    "prefix": "-space-x-1",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -0.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-1"
  },
  "-space-x-2": {
    "prefix": "-space-x-2",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -0.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-2"
  },
  "-space-x-3": {
    "prefix": "-space-x-3",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -0.75rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-3"
  },
  "-space-x-4": {
    "prefix": "-space-x-4",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -1rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-4"
  },
  "-space-x-5": {
    "prefix": "-space-x-5",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -1.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-5"
  },
  "-space-x-6": {
    "prefix": "-space-x-6",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -1.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-6"
  },
  "-space-x-8": {
    "prefix": "-space-x-8",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -2rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-8"
  },
  "-space-x-10": {
    "prefix": "-space-x-10",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -2.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-10"
  },
  "-space-x-12": {
    "prefix": "-space-x-12",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -3rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-12"
  },
  "-space-x-16": {
    "prefix": "-space-x-16",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -4rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-16"
  },
  "-space-x-20": {
    "prefix": "-space-x-20",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-20"
  },
  "-space-x-24": {
    "prefix": "-space-x-24",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -6rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-24"
  },
  "-space-x-32": {
    "prefix": "-space-x-32",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -8rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-32"
  },
  "-space-x-40": {
    "prefix": "-space-x-40",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -10rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-40"
  },
  "-space-x-48": {
    "prefix": "-space-x-48",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -12rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-48"
  },
  "-space-x-56": {
    "prefix": "-space-x-56",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -14rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-56"
  },
  "-space-x-64": {
    "prefix": "-space-x-64",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: -16rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "-space-x-64"
  },

  "space-y-px": {
    "prefix": "space-y-px",
    "body": [".${1:classname} > * + * {", "margin-top: 1px;", "}", "", "${0}"],
    "description": "space-y-px"
  },
  "space-y-0": {
    "prefix": "space-y-0",
    "body": [".${1:classname} > * + * {", "margin-top: 0;", "}", "", "${0}"],
    "description": "space-y-0"
  },
  "space-y-1": {
    "prefix": "space-y-1",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: 0.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-1"
  },
  "space-y-2": {
    "prefix": "space-y-2",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: 0.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-2"
  },
  "space-y-3": {
    "prefix": "space-y-3",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: 0.75rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-3"
  },
  "space-y-4": {
    "prefix": "space-y-4",
    "body": [".${1:classname} > * + * {", "margin-top: 1rem;", "}", "", "${0}"],
    "description": "space-y-4"
  },
  "space-y-5": {
    "prefix": "space-y-5",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: 1.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-5"
  },
  "space-y-6": {
    "prefix": "space-y-6",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: 1.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-6"
  },
  "space-y-8": {
    "prefix": "space-y-8",
    "body": [".${1:classname} > * + * {", "margin-top: 2rem;", "}", "", "${0}"],
    "description": "space-y-8"
  },
  "space-y-10": {
    "prefix": "space-y-10",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: 2.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-10"
  },
  "space-y-12": {
    "prefix": "space-y-12",
    "body": [".${1:classname} > * + * {", "margin-top: 3rem;", "}", "", "${0}"],
    "description": "space-y-12"
  },
  "space-y-16": {
    "prefix": "space-y-16",
    "body": [".${1:classname} > * + * {", "margin-top: 4rem;", "}", "", "${0}"],
    "description": "space-y-16"
  },
  "space-y-20": {
    "prefix": "space-y-20",
    "body": [".${1:classname} > * + * {", "margin-top: 5rem;", "}", "", "${0}"],
    "description": "space-y-20"
  },
  "space-y-24": {
    "prefix": "space-y-24",
    "body": [".${1:classname} > * + * {", "margin-top: 6rem;", "}", "", "${0}"],
    "description": "space-y-24"
  },
  "space-y-32": {
    "prefix": "space-y-32",
    "body": [".${1:classname} > * + * {", "margin-top: 8rem;", "}", "", "${0}"],
    "description": "space-y-32"
  },
  "space-y-40": {
    "prefix": "space-y-40",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: 10rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-40"
  },
  "space-y-48": {
    "prefix": "space-y-48",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: 12rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-48"
  },
  "space-y-56": {
    "prefix": "space-y-56",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: 14rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-56"
  },
  "space-y-64": {
    "prefix": "space-y-64",
    "body": [
      ".${1:classname} > * + * {",
      "margin-top: 16rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-y-64"
  },

  "space-x-px": {
    "prefix": "space-x-px",
    "body": [".${1:classname} > * + * {", "margin-left: 1px;", "}", "", "${0}"],
    "description": "space-x-px"
  },
  "space-x-0": {
    "prefix": "space-x-0",
    "body": [".${1:classname} > * + * {", "margin-left: 0;", "}", "", "${0}"],
    "description": "space-x-0"
  },
  "space-x-1": {
    "prefix": "space-x-1",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 0.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-1"
  },
  "space-x-2": {
    "prefix": "space-x-2",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 0.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-2"
  },
  "space-x-3": {
    "prefix": "space-x-3",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 0.75rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-3"
  },
  "space-x-4": {
    "prefix": "space-x-4",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 1rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-4"
  },
  "space-x-5": {
    "prefix": "space-x-5",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 1.25rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-5"
  },
  "space-x-6": {
    "prefix": "space-x-6",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 1.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-6"
  },
  "space-x-8": {
    "prefix": "space-x-8",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 2rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-8"
  },
  "space-x-10": {
    "prefix": "space-x-10",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 2.5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-10"
  },
  "space-x-12": {
    "prefix": "space-x-12",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 3rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-12"
  },
  "space-x-16": {
    "prefix": "space-x-16",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 4rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-16"
  },
  "space-x-20": {
    "prefix": "space-x-20",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 5rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-20"
  },
  "space-x-24": {
    "prefix": "space-x-24",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 6rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-24"
  },
  "space-x-32": {
    "prefix": "space-x-32",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 8rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-32"
  },
  "space-x-40": {
    "prefix": "space-x-40",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 10rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-40"
  },
  "space-x-48": {
    "prefix": "space-x-48",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 12rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-48"
  },
  "space-x-56": {
    "prefix": "space-x-56",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 14rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-56"
  },
  "space-x-64": {
    "prefix": "space-x-64",
    "body": [
      ".${1:classname} > * + * {",
      "margin-left: 16rem;",
      "}",
      "",
      "${0}"
    ],
    "description": "space-x-64"
  },
}

Fix docs typo with `<` `>` highlight

Move back template literals for highlighting