diff --git a/src/completion.ts b/src/completion.ts
new file mode 100644
index 0000000..f67807f
--- /dev/null
+++ b/src/completion.ts
@@ -0,0 +1,164 @@
+import {
+    Disposable,
+    languages,
+    CompletionItem,
+    SnippetString,
+    MarkdownString,
+    CompletionList,
+    ProviderResult,
+    TextDocument,
+    Position,
+} from 'vscode'
+import { tagAttributes, cssProperties, htmlTags } from './snippets'
+
+interface Snippet {
+    prefix: string
+    body: string
+    description?: string
+}
+
+function createCompletionItem(snippet: Snippet, detail: string, kind?: number) {
+    const snippetCompletion = new CompletionItem(snippet.prefix)
+
+    snippetCompletion.detail = detail
+    snippetCompletion.documentation = new MarkdownString(snippet.description)
+    snippetCompletion.insertText = new SnippetString(snippet.body)
+    snippetCompletion.kind = kind
+
+    return snippetCompletion
+}
+
+function isWithinTags(document: TextDocument, position: Position, regex: RegExp): boolean {
+    const docText = document.getText()
+    const tagMatches = docText.match(regex)
+
+    if (!tagMatches) return false
+
+    const offset = document.offsetAt(position)
+
+    let isWithinOpeningTag = false
+    let isWithinClosingTag = false
+    let indexOfPos = 0
+
+    tagMatches.forEach((tag) => {
+        if (isWithinOpeningTag && isWithinClosingTag) return
+
+        const tagIndex = docText.indexOf(tag, indexOfPos)
+        const tagLength = tagIndex + tag.length
+        const isHTMLTag = tag[0] === '<'
+
+        indexOfPos = tagLength
+
+        if ((isHTMLTag && tag[1] !== '/') || tag === '{') {
+            isWithinOpeningTag = tagLength < offset
+        } else if (tag[1] === '/' || tag === '}') {
+            isWithinClosingTag = tagIndex > offset - 1
+        }
+    })
+
+    if (isWithinOpeningTag && isWithinClosingTag) return true
+    else return false
+}
+
+function isWithinOpeningTag(document: TextDocument, position: Position, regex: RegExp): boolean {
+    const docText = document.getText()
+    const tagMatches = docText.match(regex)
+
+    if (!tagMatches) return false
+
+    const cursorPos = document.offsetAt(position)
+    let isWithinOpeningTag = false
+    let indexOfPos = 0
+
+    tagMatches.forEach((tag) => {
+        const tagStart = docText.indexOf(tag, indexOfPos)
+        const tagEnd = tagStart + tag.length
+
+        indexOfPos = tagEnd
+
+        if (cursorPos > tagStart && cursorPos <= tagEnd) {
+            isWithinOpeningTag = true
+        }
+    })
+
+    return isWithinOpeningTag
+}
+
+export default class Completion {
+    constructor(subscriptions: Disposable[]) {
+        const attributeProvider = languages.registerCompletionItemProvider('mjml', {
+            provideCompletionItems(document, position) {
+                const tagRegex = /<[^/](?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>/gm
+
+                if (!isWithinOpeningTag(document, position, tagRegex)) return
+
+                return tagAttributes.map((attr) => createCompletionItem(attr, 'MJML'))
+            },
+        })
+
+        const cssPropertyProvider = languages.registerCompletionItemProvider('mjml', {
+            provideCompletionItems(document, position) {
+                const { text: lineText } = document.lineAt(position)
+                const lastLineChar = lineText[position.character]
+
+                if (lastLineChar === ';') return
+
+                const tagRegex = /<\/?mj-style(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])*>/gm
+                const bracketRegex = /{|}/gm
+
+                if (!isWithinTags(document, position, tagRegex)) return
+                if (!isWithinTags(document, position, bracketRegex)) return
+
+                return cssProperties.map((prop) => {
+                    const snippetCompletion = createCompletionItem(prop, 'MJML (CSS)')
+
+                    snippetCompletion.command = {
+                        command: 'editor.action.triggerSuggest',
+                        title: '',
+                    }
+
+                    return snippetCompletion
+                })
+            },
+        })
+
+        const cssValueProvider = languages.registerCompletionItemProvider('mjml', {
+            provideCompletionItems(document, position) {
+                const snippetCompletions: ProviderResult<CompletionItem[] | CompletionList> = []
+
+                cssProperties.forEach((prop) => {
+                    const formattedBody = prop.body.split('$1').join('')
+
+                    if (!document.lineAt(position).text.includes(formattedBody)) return
+
+                    prop.values.forEach((val) => {
+                        snippetCompletions.push(
+                            createCompletionItem({ prefix: val, body: val }, '', 11),
+                        )
+                    })
+                })
+
+                return snippetCompletions
+            },
+        })
+
+        const htmlTagProvider = languages.registerCompletionItemProvider('mjml', {
+            provideCompletionItems(document, position) {
+                const mjTextRegex = /<\/?mj-text(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])*>/gm
+                const htmlTagRegex = /<\/?[^/?mj\-.*](?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])*>/gm
+
+                if (!isWithinTags(document, position, mjTextRegex)) return
+                if (isWithinOpeningTag(document, position, htmlTagRegex)) return
+
+                return htmlTags.map((tag) => createCompletionItem(tag, 'MJML (HTML)'))
+            },
+        })
+
+        subscriptions.push(
+            attributeProvider,
+            cssPropertyProvider,
+            cssValueProvider,
+            htmlTagProvider,
+        )
+    }
+}
diff --git a/src/extension.ts b/src/extension.ts
index a52cdb5..3f3ceaf 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -1,6 +1,7 @@
 import { ExtensionContext, TextDocument, window, workspace } from 'vscode'
 
 import Beautify from './beautify'
+import Completion from './completion'
 import Copy from './copy'
 import Documentation from './documentation'
 import Email from './email'
@@ -22,6 +23,7 @@ export function activate(extensionContext: ExtensionContext) {
 
     extensionFeatures = [
         new Beautify(context.subscriptions),
+        new Completion(context.subscriptions),
         new Copy(context.subscriptions),
         new Documentation(context),
         new Email(context.subscriptions),
diff --git a/src/snippets/attributes.ts b/src/snippets/attributes.ts
new file mode 100644
index 0000000..5e10f16
--- /dev/null
+++ b/src/snippets/attributes.ts
@@ -0,0 +1,167 @@
+export default [
+    {
+        prefix: 'align',
+        body: 'align="$1"',
+        description: 'align attribute: `align=""`',
+    },
+    {
+        prefix: 'alt',
+        body: 'alt="$1"',
+        description: 'alt attribute: `alt=""`',
+    },
+    {
+        prefix: 'background-color',
+        body: 'background-color="$1"',
+        description: 'background-color attribute: `background-color=""`',
+    },
+    {
+        prefix: 'border',
+        body: 'border="$1"',
+        description: 'border attribute: `border=""`',
+    },
+    {
+        prefix: 'border-radius',
+        body: 'border-radius="$1"',
+        description: 'border-radius attribute: `border-radius=""`',
+    },
+    {
+        prefix: 'class',
+        body: 'class="$1"',
+        description: 'class attribute: `class=""`',
+    },
+    {
+        prefix: 'color',
+        body: 'color="$1"',
+        description: 'color attribute: `color=""`',
+    },
+    {
+        prefix: 'container-background-color',
+        body: 'container-background-color="$1"',
+        description: 'container-background-color attribute: `container-background-color=""`',
+    },
+    {
+        prefix: 'css-class',
+        body: 'css-class="$1"',
+        description: 'css-class attribute: `css-class=""`',
+    },
+    {
+        prefix: 'font-family',
+        body: 'font-family="$1"',
+        description: 'font-family attribute: `font-family=""`',
+    },
+    {
+        prefix: 'font-size',
+        body: 'font-size="$1"',
+        description: 'font-size attribute: `font-size=""`',
+    },
+    {
+        prefix: 'font-weight',
+        body: 'font-weight="$1"',
+        description: 'font-weight attribute: `font-weight=""`',
+    },
+    {
+        prefix: 'height',
+        body: 'height="$1"',
+        description: 'height attribute: `height=""`',
+    },
+    {
+        prefix: 'href',
+        body: 'href="$1"',
+        description: 'href attribute: `href=""`',
+    },
+    {
+        prefix: 'id',
+        body: 'id="$1"',
+        description: 'id attribute: `id=""`',
+    },
+    {
+        prefix: 'inline',
+        body: 'inline="$1"',
+        description: 'inline attribute: `inline=""`',
+    },
+    {
+        prefix: 'inner-padding',
+        body: 'inner-padding="$1"',
+        description: 'inner-padding attribute: `inner-padding=""`',
+    },
+    {
+        prefix: 'lang',
+        body: 'lang="$1"',
+        description: 'lang attribute: `lang=""`',
+    },
+    {
+        prefix: 'letter-spacing',
+        body: 'letter-spacing="$1"',
+        description: 'letter-spacing attribute: `letter-spacing=""`',
+    },
+    {
+        prefix: 'line-height',
+        body: 'line-height="$1"',
+        description: 'line-height attribute: `line-height=""`',
+    },
+    {
+        prefix: 'mj-class',
+        body: 'mj-class="$1"',
+        description: 'mj-class attribute: `mj-class=""`',
+    },
+    {
+        prefix: 'name',
+        body: 'name="$1"',
+        description: 'name attribute: `name=""`',
+    },
+    {
+        prefix: 'padding',
+        body: 'padding="$1"',
+        description: 'padding attribute: `padding=""`',
+    },
+    {
+        prefix: 'padding-bottom',
+        body: 'padding-bottom="$1"',
+        description: 'padding-bottom attribute: `padding-bottom=""`',
+    },
+    {
+        prefix: 'padding-left',
+        body: 'padding-left="$1"',
+        description: 'padding-left attribute: `padding-left=""`',
+    },
+    {
+        prefix: 'padding-right',
+        body: 'padding-right="$1"',
+        description: 'padding-right attribute: `padding-right=""`',
+    },
+    {
+        prefix: 'padding-top',
+        body: 'padding-top="$1"',
+        description: 'padding-top attribute: `padding-top=""`',
+    },
+    {
+        prefix: 'path',
+        body: 'path="$1"',
+        description: 'path attribute: `path=""`',
+    },
+    {
+        prefix: 'src',
+        body: 'src="$1"',
+        description: 'src attribute: `src=""`',
+    },
+    {
+        prefix: 'style',
+        body: 'style="$1"',
+        description: 'style attribute: `style=""`',
+    },
+    {
+        prefix: 'text-align',
+        body: 'text-align="$1"',
+        description: 'text-align attribute: `text-align=""`',
+    },
+    {
+        prefix: 'vertical-align',
+        body: 'vertical-align="$1"',
+        description: 'vertical-align attribute: `vertical-align=""`',
+    },
+    {
+        prefix: 'width',
+        body: 'width="$1"',
+        description: 'width attribute: `width=""`',
+    },
+]
diff --git a/src/snippets/css.ts b/src/snippets/css.ts
new file mode 100644
index 0000000..ba46a09
--- /dev/null
+++ b/src/snippets/css.ts
@@ -0,0 +1,564 @@
+export default [
+    {
+        prefix: 'background',
+        body: 'background: $1;',
+        values: ['initial', 'inherit'],
+        description: 'CSS background property: `background: ;`',
+    },
+    {
+        prefix: 'background-clip',
+        body: 'background-clip: $1;',
+        values: ['border-box', 'padding-box', 'content-box', 'initial', 'inherit'],
+        description: 'CSS background-clip property: `background-clip: ;`',
+    },
+    {
+        prefix: 'background-color',
+        body: 'background-color: $1;',
+        values: ['#', '#000000', '#ffffff', 'transparent', 'initial', 'inherit'],
+        description: 'CSS background-color property: `background-color: ;`',
+    },
+    {
+        prefix: 'background-image',
+        body: 'background-image: $1;',
+        values: ['url("$1")', 'none', 'initial', 'inherit'],
+        description: 'CSS background-image property: `background-image: ;`',
+    },
+    {
+        prefix: 'background-origin',
+        body: 'background-origin: $1;',
+        values: ['padding-box', 'border-box', 'content-box', 'initial', 'inherit'],
+        description: 'CSS background-origin property: `background-origin: ;`',
+    },
+    {
+        prefix: 'background-position',
+        body: 'background-position: $1;',
+        values: ['initial', 'inherit'],
+        description: 'CSS background-position property: `background-position: ;`',
+    },
+    {
+        prefix: 'background-repeat',
+        body: 'background-repeat: $1;',
+        values: ['repeat', 'repeat-x', 'repeat-y', 'no-repeat', 'initial', 'inherit'],
+        description: 'CSS background-repeat property: `background-repeat: ;`',
+    },
+    {
+        prefix: 'background-size',
+        body: 'background-size: $1;',
+        values: ['auto', 'cover', 'contain', 'initial', 'inherit'],
+        description: 'CSS background-size property: `background-size: ;`',
+    },
+    {
+        prefix: 'border',
+        body: 'border: $1;',
+        values: ['1px solid #', '1px solid #000000', '1px solid #ffffff', 'initial', 'inherit'],
+        description: 'CSS border property: `border: ;`',
+    },
+    {
+        prefix: 'border-bottom',
+        body: 'border-bottom: $1;',
+        values: ['1px solid #', '1px solid #000000', '1px solid #ffffff', 'initial', 'inherit'],
+        description: 'CSS border-bottom property: `border-bottom: ;`',
+    },
+    {
+        prefix: 'border-bottom-color',
+        body: 'border-bottom-color: $1;',
+        values: ['#', '#000000', '#ffffff', 'transparent', 'initial', 'inherit'],
+        description: 'CSS border-bottom-color property: `border-bottom-color: ;`',
+    },
+    {
+        prefix: 'border-bottom-left-radius',
+        body: 'border-bottom-left-radius: $1;',
+        values: ['$1px', '$1%', 'initial', 'inherit'],
+        description: 'CSS border-bottom-left-radius property: `border-bottom-left-radius: ;`',
+    },
+    {
+        prefix: 'border-bottom-right-radius',
+        body: 'border-bottom-right-radius: $1;',
+        values: ['$1px', '$1%', 'initial', 'inherit'],
+        description: 'CSS border-bottom-right-radius property: `border-bottom-right-radius: ;`',
+    },
+    {
+        prefix: 'border-bottom-style',
+        body: 'border-bottom-style: $1;',
+        values: [
+            'none',
+            'hidden',
+            'dotted',
+            'dashed',
+            'solid',
+            'double',
+            'groove',
+            'ridge',
+            'inset',
+            'outset',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS border-bottom-style property: `border-bottom-style: ;`',
+    },
+    {
+        prefix: 'border-bottom-width',
+        body: 'border-bottom-width: $1;',
+        values: ['$1px', 'medium', 'thin', 'thick', 'initial', 'inherit'],
+        description: 'CSS border-bottom-width property: `border-bottom-width: ;`',
+    },
+    {
+        prefix: 'border-collapse',
+        body: 'border-collapse: $1;',
+        values: ['separate', 'collapse', 'initial', 'inherit'],
+        description: 'CSS border-collapse property: `border-collapse: ;`',
+    },
+    {
+        prefix: 'border-color',
+        body: 'border-color: $1;',
+        values: ['#', '#000000', '#ffffff', 'transparent', 'initial', 'inherit'],
+        description: 'CSS border-color property: `border-color: ;`',
+    },
+    {
+        prefix: 'border-left',
+        body: 'border-left: $1;',
+        values: ['1px solid #', 'initial', 'inherit'],
+        description: 'CSS border-left property: `border-left: ;`',
+    },
+    {
+        prefix: 'border-left-color',
+        body: 'border-left-color: $1;',
+        values: ['#', '#000000', '#ffffff', 'transparent', 'initial', 'inherit'],
+        description: 'CSS border-left-color property: `border-left-color: ;`',
+    },
+    {
+        prefix: 'border-left-style',
+        body: 'border-left-style: $1;',
+        values: [
+            'none',
+            'hidden',
+            'dotted',
+            'dashed',
+            'solid',
+            'double',
+            'groove',
+            'ridge',
+            'inset',
+            'outset',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS border-left-style property: `border-left-style: ;`',
+    },
+    {
+        prefix: 'border-left-width',
+        body: 'border-left-width: $1;',
+        values: ['$1px', 'medium', 'thin', 'thick', 'initial', 'inherit'],
+        description: 'CSS border-left-width property: `border-left-width: ;`',
+    },
+    {
+        prefix: 'border-radius',
+        body: 'border-radius: $1;',
+        values: ['$1px', '$1%', 'initial', 'inherit'],
+        description: 'CSS border-radius property: `border-radius: ;`',
+    },
+    {
+        prefix: 'border-right',
+        body: 'border-right: $1;',
+        values: ['1px solid #', '1px solid #000000', '1px solid #ffffff', 'initial', 'inherit'],
+        description: 'CSS border-right property: `border-right: ;`',
+    },
+    {
+        prefix: 'border-right-color',
+        body: 'border-right-color: $1;',
+        values: ['#', '#000000', '#ffffff', 'transparent', 'initial', 'inherit'],
+        description: 'CSS border-right-color property: `border-right-color: ;`',
+    },
+    {
+        prefix: 'border-right-style',
+        body: 'border-right-style: $1;',
+        values: [
+            'none',
+            'hidden',
+            'dotted',
+            'dashed',
+            'solid',
+            'double',
+            'groove',
+            'ridge',
+            'inset',
+            'outset',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS border-right-style property: `border-right-style: ;`',
+    },
+    {
+        prefix: 'border-right-width',
+        body: 'border-right-width: $1;',
+        values: ['$1px', 'medium', 'thin', 'thick', 'initial', 'inherit'],
+        description: 'CSS border-right-width property: `border-right-width: ;`',
+    },
+    {
+        prefix: 'border-style',
+        body: 'border-style: $1;',
+        values: [
+            'none',
+            'hidden',
+            'dotted',
+            'dashed',
+            'solid',
+            'double',
+            'groove',
+            'ridge',
+            'inset',
+            'outset',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS border-style property: `border-style: ;`',
+    },
+    {
+        prefix: 'border-top',
+        body: 'border-top: $1;',
+        values: ['1px solid #', 'initial', 'inherit'],
+        description: 'CSS border-top property: `border-top: ;`',
+    },
+    {
+        prefix: 'border-top-color',
+        body: 'border-top-color: $1;',
+        values: ['#', '#000000', '#ffffff', 'transparent', 'initial', 'inherit'],
+        description: 'CSS border-top-color property: `border-top-color: ;`',
+    },
+    {
+        prefix: 'border-top-left-radius',
+        body: 'border-top-left-radius: $1;',
+        values: ['$1px', '$1%', 'initial', 'inherit'],
+        description: 'CSS border-top-left-radius property: `border-top-left-radius: ;`',
+    },
+    {
+        prefix: 'border-top-right-radius',
+        body: 'border-top-right-radius: $1;',
+        values: ['$1px', '$1%', 'initial', 'inherit'],
+        description: 'CSS border-top-right-radius property: `border-top-right-radius: ;`',
+    },
+    {
+        prefix: 'border-top-style',
+        body: 'border-top-style: $1;',
+        values: [
+            'none',
+            'hidden',
+            'dotted',
+            'dashed',
+            'solid',
+            'double',
+            'groove',
+            'ridge',
+            'inset',
+            'outset',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS border-top-style property: `border-top-style: ;`',
+    },
+    {
+        prefix: 'border-top-width',
+        body: 'border-top-width: $1;',
+        values: ['$1px', 'medium', 'thin', 'thick', 'initial', 'inherit'],
+        description: 'CSS border-top-width property: `border-top-width: ;`',
+    },
+    {
+        prefix: 'border-width',
+        body: 'border-width: $1;',
+        values: ['$1px', 'medium', 'thin', 'thick', 'initial', 'inherit'],
+        description: 'CSS border-width property: `border-width: ;`',
+    },
+    {
+        prefix: 'color',
+        body: 'color: $1;',
+        values: ['#', '#000000', '#ffffff', 'initial', 'inherit'],
+        description: 'CSS color property: `color: ;`',
+    },
+    {
+        prefix: 'display',
+        body: 'display: $1;',
+        values: [
+            'inline',
+            'block',
+            'inline-block',
+            'inline-table',
+            'list-item',
+            'table',
+            'table-caption',
+            'table-column-group',
+            'table-header-group',
+            'table-footer-group',
+            'table-row-group',
+            'table-cell',
+            'table-column',
+            'table-row',
+            'none',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS display property: `display: ;`',
+    },
+    {
+        prefix: 'font',
+        body: 'font: $1;',
+        values: [
+            '400 16px Arial, sans-serif',
+            'caption',
+            'icon',
+            'menu',
+            'message-box',
+            'small-caption',
+            'status-bar',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS font property: `font: ;`',
+    },
+    {
+        prefix: 'font-family',
+        body: 'font-family: $1;',
+        values: ['Arial, sans-serif', 'initial', 'inherit'],
+        description: 'CSS font-family property: `font-family: ;`',
+    },
+    {
+        prefix: 'font-size',
+        body: 'font-size: $1;',
+        values: [
+            '$1px',
+            '$1%',
+            'medium',
+            'xx-small',
+            'x-small',
+            'small',
+            'large',
+            'x-large',
+            'xx-large',
+            'smaller',
+            'larger',
+            'length',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS font-size property: `font-size: ;`',
+    },
+    {
+        prefix: 'font-style',
+        body: 'font-style: $1;',
+        values: ['normal', 'italic', 'oblique', 'initial', 'inherit'],
+        description: 'CSS font-style property: `font-style: ;`',
+    },
+    {
+        prefix: 'font-variant',
+        body: 'font-variant: $1;',
+        values: ['normal', 'small-caps', 'initial', 'inherit'],
+        description: 'CSS font-variant property: `font-variant: ;`',
+    },
+    {
+        prefix: 'font-weight',
+        body: 'font-weight: $1;',
+        values: [
+            '100',
+            '200',
+            '300',
+            '400',
+            '500',
+            '600',
+            '700',
+            '800',
+            '900',
+            'normal',
+            'bold',
+            'bolder',
+            'lighter',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS font-weight property: `font-weight: ;`',
+    },
+    {
+        prefix: 'height',
+        body: 'height: $1;',
+        values: ['$1px', 'auto', 'initial', 'inherit'],
+        description: 'CSS height property: `height: ;`',
+    },
+    {
+        prefix: 'letter-spacing',
+        body: 'letter-spacing: $1;',
+        values: ['$1px', 'normal', 'initial', 'inherit'],
+        description: 'CSS letter-spacing property: `letter-spacing: ;`',
+    },
+    {
+        prefix: 'line-height',
+        body: 'line-height: $1;',
+        values: ['$1px', 'normal', 'initial', 'inherit'],
+        description: 'CSS line-height property: `line-height: ;`',
+    },
+    {
+        prefix: 'list-style',
+        body: 'list-style: $1;',
+        values: ['initial', 'inherit'],
+        description: 'CSS list-style property: `list-style: ;`',
+    },
+    {
+        prefix: 'list-style-position',
+        body: 'list-style-position: $1;',
+        values: ['inside', 'outside', 'initial', 'inherit'],
+        description: 'CSS list-style-position property: `list-style-position: ;`',
+    },
+    {
+        prefix: 'list-style-type',
+        body: 'list-style-type: $1;',
+        values: [
+            'disc',
+            'circle',
+            'decimal',
+            'decimal-leading-zero',
+            'lower-alpha',
+            'lower-latin',
+            'lower-roman',
+            'none',
+            'square',
+            'upper-alpha',
+            'upper-latin',
+            'upper-roman',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS list-style-type property: `list-style-type: ;`',
+    },
+    {
+        prefix: 'opacity',
+        body: 'opacity: $1;',
+        values: ['initial', 'inherit'],
+        description: 'CSS opacity property: `opacity: ;`',
+    },
+    {
+        prefix: 'padding-bottom',
+        body: 'padding-bottom: $1;',
+        values: ['$1px', 'initial', 'inherit'],
+        description: 'CSS padding-bottom property: `padding-bottom: ;`',
+    },
+    {
+        prefix: 'padding-left',
+        body: 'padding-left: $1;',
+        values: ['$1px', 'initial', 'inherit'],
+        description: 'CSS padding-left property: `padding-left: ;`',
+    },
+    {
+        prefix: 'padding-right',
+        body: 'padding-right: $1;',
+        values: ['$1px', 'initial', 'inherit'],
+        description: 'CSS padding-right property: `padding-right: ;`',
+    },
+    {
+        prefix: 'padding-top',
+        body: 'padding-top: $1;',
+        values: ['$1px', 'initial', 'inherit'],
+        description: 'CSS padding-top property: `padding-top: ;`',
+    },
+    {
+        prefix: 'table-layout',
+        body: 'table-layout: $1;',
+        values: ['auto', 'fixed', 'initial', 'inherit'],
+        description: 'CSS table-layout property: `table-layout: ;`',
+    },
+    {
+        prefix: 'text-align',
+        body: 'text-align: $1;',
+        values: ['left', 'right', 'center', 'justify', 'initial', 'inherit'],
+        description: 'CSS text-align property: `text-align: ;`',
+    },
+    {
+        prefix: 'text-align-last',
+        body: 'text-align-last: $1;',
+        values: [
+            'auto',
+            'left',
+            'right',
+            'center',
+            'justify',
+            'start',
+            'end',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS text-align-last property: `text-align-last: ;`',
+    },
+    {
+        prefix: 'text-decoration',
+        body: 'text-decoration: $1;',
+        values: ['none', 'underline', 'overline', 'line-through', 'initial', 'inherit'],
+        description: 'CSS text-decoration property: `text-decoration: ;`',
+    },
+    {
+        prefix: 'text-decoration-color',
+        body: 'text-decoration-color: $1;',
+        values: ['#', '#000000', '#ffffff', 'initial', 'inherit'],
+        description: 'CSS text-decoration-color property: `text-decoration-color: ;`',
+    },
+    {
+        prefix: 'text-decoration-line',
+        body: 'text-decoration-line: $1;',
+        values: ['none', 'underline', 'overline', 'line-through', 'initial', 'inherit'],
+        description: 'CSS text-decoration-line property: `text-decoration-line: ;`',
+    },
+    {
+        prefix: 'text-decoration-style',
+        body: 'text-decoration-style: $1;',
+        values: ['solid', 'double', 'dotted', 'dashed', 'wavy', 'initial', 'inherit'],
+        description: 'CSS text-decoration-style property: `text-decoration-style: ;`',
+    },
+    {
+        prefix: 'vertical-align',
+        body: 'vertical-align: $1;',
+        values: [
+            'baseline',
+            'sub',
+            'super',
+            'top',
+            'text-top',
+            'middle',
+            'bottom',
+            'text-bottom',
+            'initial',
+            'inherit',
+        ],
+        description: 'CSS vertical-align property: `vertical-align: ;`',
+    },
+    {
+        prefix: 'white-space',
+        body: 'white-space: $1;',
+        values: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'initial', 'inherit'],
+        description: 'CSS white-space property: `white-space: ;`',
+    },
+    {
+        prefix: 'width',
+        body: 'width: $1;',
+        values: ['$1px', '$1%', 'auto', 'initial', 'inherit'],
+        description: 'CSS width property: `width: ;`',
+    },
+    {
+        prefix: 'word-break',
+        body: 'word-break: $1;',
+        values: ['normal', 'break-all', 'keep-all', 'initial', 'inherit'],
+        description: 'CSS word-break property: `word-break: ;`',
+    },
+    {
+        prefix: 'word-spacing',
+        body: 'word-spacing: $1;',
+        values: ['$1px', 'normal', 'initial', 'inherit'],
+        description: 'CSS word-spacing property: `word-spacing: ;`',
+    },
+    {
+        prefix: 'word-wrap',
+        body: 'word-wrap: $1;',
+        values: ['normal', 'break-word', 'initial', 'inherit'],
+        description: 'CSS word-wrap property: `word-wrap: ;`',
+    },
+    {
+        prefix: 'z-index',
+        body: 'z-index: $1;',
+        values: ['auto', 'initial', 'inherit'],
+        description: 'CSS z-index property: `z-index: ;`',
+    },
+]
diff --git a/src/snippets/html.ts b/src/snippets/html.ts
new file mode 100644
index 0000000..1e86bec
--- /dev/null
+++ b/src/snippets/html.ts
@@ -0,0 +1,377 @@
+export default [
+    {
+        prefix: 'a',
+        body: '<a href="$1">$2</a>$3',
+        description: 'Tag: `<a href=""></a>`',
+    },
+    {
+        prefix: 'abbr',
+        body: '<abbr title="$1">$2</abbr>$3',
+        description: 'Tag: `<abbr title=""></abbr>`',
+    },
+    {
+        prefix: 'address',
+        body: '<address>$1</address>',
+        description: 'Tag: `<address></address>`',
+    },
+    {
+        prefix: 'article',
+        body: '<article>$1</article>',
+        description: 'Tag: `<article></article>`',
+    },
+    {
+        prefix: 'aside',
+        body: '<aside>$1</aside>$2',
+        description: 'Tag: `<aside></aside>`',
+    },
+    {
+        prefix: 'b',
+        body: '<b>$1</b>$2',
+        description: 'Tag: `<b></b>`',
+    },
+    {
+        prefix: 'blockquote',
+        body: '<blockquote cite="$2">$1</blockquote>',
+        description: 'Tag: `<blockquote cite=""></blockquote>`',
+    },
+    {
+        prefix: 'br',
+        body: '<br>',
+        description: 'Tag: `<br>`',
+    },
+    {
+        prefix: 'button',
+        body: '<button type="$1">$2</button>$3',
+        description: 'Tag: `<button type=""></button>`',
+    },
+    {
+        prefix: 'caption',
+        body: '<caption>$1</caption>$2',
+        description: 'Tag: `<caption></caption>`',
+    },
+    {
+        prefix: 'cite',
+        body: '<cite>$1</cite>$2',
+        description: 'Tag: `<cite></cite>`',
+    },
+    {
+        prefix: 'code',
+        body: '<code>$1</code>$2',
+        description: 'Tag: `<code></code>`',
+    },
+    {
+        prefix: 'col',
+        body: '<col>$2',
+        description: 'Tag: `<col>`',
+    },
+    {
+        prefix: 'colgroup',
+        body: '<colgroup>$1</colgroup>',
+        description: 'Tag: `<colgroup></colgroup>`',
+    },
+    {
+        prefix: 'datalist',
+        body: '<datalist>$1</datalist>',
+        description: 'Tag: `<datalist></datalist>`',
+    },
+    {
+        prefix: 'dd',
+        body: '<dd>$1</dd>$2',
+        description: 'Tag: `<dd></dd>`',
+    },
+    {
+        prefix: 'del',
+        body: '<del>$1</del>$2',
+        description: 'Tag: `<del></del>`',
+    },
+    {
+        prefix: 'details',
+        body: '<details>$1</details>',
+        description: 'Tag: `<details></details>`',
+    },
+    {
+        prefix: 'dialog',
+        body: '<dialog>$1</dialog>$2',
+        description: 'Tag: `<dialog></dialog>`',
+    },
+    {
+        prefix: 'dfn',
+        body: '<dfn>$1</dfn>$2',
+        description: 'Tag: `<dfn></dfn>`',
+    },
+    {
+        prefix: 'div',
+        body: '<div>$1</div>',
+        description: 'Tag: `<div></div>`',
+    },
+    {
+        prefix: 'dl',
+        body: '<dl>$1</dl>',
+        description: 'Tag: `<dl></dl>`',
+    },
+    {
+        prefix: 'dt',
+        body: '<dt>$1</dt>$2',
+        description: 'Tag: `<dt></dt>`',
+    },
+    {
+        prefix: 'em',
+        body: '<em>$1</em>$2',
+        description: 'Tag: `<em></em>`',
+    },
+    {
+        prefix: 'fieldset',
+        body: '<fieldset>$1</fieldset>',
+        description: 'Tag: `<fieldset></fieldset>`',
+    },
+    {
+        prefix: 'figcaption',
+        body: '<figcaption>$1</figcaption>$2',
+        description: 'Tag: `<figcaption></figcaption>`',
+    },
+    {
+        prefix: 'figure',
+        body: '<figure>$1</figure>',
+        description: 'Tag: `<figure></figure>`',
+    },
+    {
+        prefix: 'footer',
+        body: '<footer>$1</footer>',
+        description: 'Tag: `<footer></footer>`',
+    },
+    {
+        prefix: 'form',
+        body: '<form>$1</form>',
+        description: 'Tag: `<form></form>`',
+    },
+    {
+        prefix: 'h1',
+        body: '<h1>$1</h1>$2',
+        description: 'Tag: `<h1></h1>`',
+    },
+    {
+        prefix: 'h2',
+        body: '<h2>$1</h2>$2',
+        description: 'Tag: `<h2></h2>`',
+    },
+    {
+        prefix: 'h3',
+        body: '<h3>$1</h3>$2',
+        description: 'Tag: `<h3></h3>`',
+    },
+    {
+        prefix: 'h4',
+        body: '<h4>$1</h4>$2',
+        description: 'Tag: `<h4></h4>`',
+    },
+    {
+        prefix: 'h5',
+        body: '<h5>$1</h5>$2',
+        description: 'Tag: `<h5></h5>`',
+    },
+    {
+        prefix: 'h6',
+        body: '<h6>$1</h6>$2',
+        description: 'Tag: `<h6></h6>`',
+    },
+    {
+        prefix: 'header',
+        body: '<header>$1</header>',
+        description: 'Tag: `<header></header>`',
+    },
+    {
+        prefix: 'hr',
+        body: '<hr>',
+        description: 'Tag: `<hr>`',
+    },
+    {
+        prefix: 'i',
+        body: '<i>$1</i>$2',
+        description: 'Tag: `<i></i>`',
+    },
+    {
+        prefix: 'iframe',
+        body: '<iframe src="$1">$2</iframe>$3',
+        description: 'Tag: `<iframe src=""></iframe>`',
+    },
+    {
+        prefix: 'img',
+        body: '<img src="$1" alt="$2">$3',
+        description: 'Tag: `<img src="" alt="">`',
+    },
+    {
+        prefix: 'input',
+        body: '<input type="$1" name="$2" value="$3">$4',
+        description: 'Tag: `<input type="" name="" value="">`',
+    },
+    {
+        prefix: 'label',
+        body: '<label for="$1">$2</label>$3',
+        description: 'Tag: `<label for=""></label>`',
+    },
+    {
+        prefix: 'legend',
+        body: '<legend>$1</legend>$2',
+        description: 'Tag: `<legend></legend>`',
+    },
+    {
+        prefix: 'li',
+        body: '<li>$1</li>$2',
+        description: 'Tag: `<li></li>`',
+    },
+    {
+        prefix: 'main',
+        body: '<main>$1</main>',
+        description: 'Tag: `<main></main>`',
+    },
+    {
+        prefix: 'map',
+        body: '<map name="$1">$2</map>',
+        description: 'Tag: `<map name=""></map>`',
+    },
+    {
+        prefix: 'mark',
+        body: '<mark>$1</mark>$2',
+        description: 'Tag: `<mark></mark>`',
+    },
+    {
+        prefix: 'menu',
+        body: '<menu>$1</menu>',
+        description: 'Tag: `<menu></menu>`',
+    },
+    {
+        prefix: 'meter',
+        body: '<meter value="$1">$2</meter>$3',
+        description: 'Tag: `<meter value=""></meter>`',
+    },
+    {
+        prefix: 'nav',
+        body: '<nav>$1</nav>',
+        description: 'Tag: `<nav></nav>`',
+    },
+    {
+        prefix: 'object',
+        body: '<object width="$1" height="$2" data="$3">$4</object>$5',
+        description: 'Tag: `<object width="" height="" data=""></object>`',
+    },
+    {
+        prefix: 'ol',
+        body: '<ol>$1</ol>',
+        description: 'Tag: `<ol></ol>`',
+    },
+    {
+        prefix: 'optgroup',
+        body: '<optgroup>$1</optgroup>',
+        description: 'Tag: `<optgroup></optgroup>`',
+    },
+    {
+        prefix: 'option',
+        body: '<option value="$1">$2</option>$3',
+        description: 'Tag: `<option value=""></option>`',
+    },
+    {
+        prefix: 'p',
+        body: '<p>$1</p>$2',
+        description: 'Tag: `<p></p>`',
+    },
+    {
+        prefix: 'pre',
+        body: '<pre>$1</pre>',
+        description: 'Tag: `<pre></pre>`',
+    },
+    {
+        prefix: 'q',
+        body: '<q>$1</q>$2',
+        description: 'Tag: `<q></q>`',
+    },
+    {
+        prefix: 's',
+        body: '<s>$1</s>$2',
+        description: 'Tag: `<s></s>`',
+    },
+    {
+        prefix: 'section',
+        body: '<section>$1</section>',
+        description: 'Tag: `<section></section>`',
+    },
+    {
+        prefix: 'select',
+        body: '<select>$1</select>',
+        description: 'Tag: `<select></select>`',
+    },
+    {
+        prefix: 'small',
+        body: '<small>$1</small>$2',
+        description: 'Tag: `<small></small>`',
+    },
+    {
+        prefix: 'span',
+        body: '<span>$1</span>$2',
+        description: 'Tag: `<span></span>`',
+    },
+    {
+        prefix: 'strong',
+        body: '<strong>$1</strong>$2',
+        description: 'Tag: `<strong></strong>`',
+    },
+    {
+        prefix: 'sub',
+        body: '<sub>$1</sub>$2',
+        description: 'Tag: `<sub></sub>`',
+    },
+    {
+        prefix: 'sup',
+        body: '<sup>$1</sup>$2',
+        description: 'Tag: `<sup></sup>`',
+    },
+    {
+        prefix: 'table',
+        body: '<table>$1</table>',
+        description: 'Tag: `<table></table>`',
+    },
+    {
+        prefix: 'tbody',
+        body: '<tbody>$1</tbody>',
+        description: 'Tag: `<tbody></tbody>`',
+    },
+    {
+        prefix: 'td',
+        body: '<td>$1</td>$2',
+        description: 'Tag: `<td></td>`',
+    },
+    {
+        prefix: 'textarea',
+        body: '<textarea rows="$1" cols="$2">$3</textarea>$4',
+        description: 'Tag: `<textarea rows="" cols=""></textarea>`',
+    },
+    {
+        prefix: 'tfoot',
+        body: '<tfoot>$1</tfoot>',
+        description: 'Tag: `<tfoot></tfoot>`',
+    },
+    {
+        prefix: 'thead',
+        body: '<thead>$1</thead>',
+        description: 'Tag: `<thead></thead>`',
+    },
+    {
+        prefix: 'th',
+        body: '<th>$1</th>$2',
+        description: 'Tag: `<th></th>`',
+    },
+    {
+        prefix: 'tr',
+        body: '<tr>$1</tr>$2',
+        description: 'Tag: `<tr></tr>`',
+    },
+    {
+        prefix: 'u',
+        body: '<u>$1</u>$2',
+        description: 'Tag: `<u></u>`',
+    },
+    {
+        prefix: 'ul',
+        body: '<ul>$1</ul>',
+        description: 'Tag: `<ul></ul>`',
+    },
+]
diff --git a/src/snippets/index.ts b/src/snippets/index.ts
new file mode 100644
index 0000000..073fac5
--- /dev/null
+++ b/src/snippets/index.ts
@@ -0,0 +1,5 @@
+import tagAttributes from './attributes'
+import cssProperties from './css'
+import htmlTags from './html'
+
+export { tagAttributes, cssProperties, htmlTags }