{
  "html_ls": [
    {
      "name": "flex center",
      "snippet": "class=\"flex items-center justify-center${0}\""
    },
    {
      "name": "flex col",
      "snippet": "class=\"flex flex-col ${1:gap-4}${0}\""
    },
    {
      "name": "grid cols",
      "snippet": "class=\"grid grid-cols-${1:3} gap-${2:4}${0}\""
    },
    {
      "name": "responsive grid",
      "snippet": "class=\"grid grid-cols-1 md:grid-cols-${1:2} lg:grid-cols-${2:3} gap-${3:4}${0}\""
    },
    {
      "name": "container",
      "snippet": "class=\"container mx-auto px-${1:4}${0}\""
    },
    {
      "name": "card",
      "snippet": "<div class=\"rounded-lg border border-gray-200 bg-white p-${1:6} shadow-sm\">\n  ${0}\n</div>"
    },
    {
      "name": "button primary",
      "snippet": "<button class=\"rounded-md bg-${1:blue}-600 px-4 py-2 text-sm font-medium text-white hover:bg-${1:blue}-700 focus:outline-none focus:ring-2 focus:ring-${1:blue}-500\">\n  ${0:Button}\n</button>"
    },
    {
      "name": "button secondary",
      "snippet": "<button class=\"rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50\">\n  ${0:Button}\n</button>"
    },
    {
      "name": "input",
      "snippet": "<input type=\"${1:text}\" class=\"block w-full rounded-md border-gray-300 shadow-sm focus:border-${2:blue}-500 focus:ring-${2:blue}-500\" placeholder=\"${0}\" />"
    },
    {
      "name": "form label",
      "snippet": "<label class=\"block text-sm font-medium text-gray-700 mb-1\" for=\"${1:id}\">${0:Label}</label>"
    },
    {
      "name": "heading",
      "snippet": "<h${1:1} class=\"text-${2:3xl} font-${3:bold} tracking-tight text-gray-900\">${0:Heading}</h${1:1}>"
    },
    {
      "name": "muted text",
      "snippet": "class=\"text-sm text-gray-500${0}\""
    },
    {
      "name": "badge",
      "snippet": "<span class=\"inline-flex items-center rounded-full bg-${1:green}-100 px-2.5 py-0.5 text-xs font-medium text-${1:green}-800\">${0:label}</span>"
    },
    {
      "name": "alert",
      "snippet": "<div class=\"rounded-md bg-${1:red}-50 border border-${1:red}-200 p-4 text-sm text-${1:red}-800\">\n  ${0}\n</div>"
    },
    {
      "name": "dark mode variant",
      "snippet": "class=\"${1:bg-white text-gray-900} dark:${0:bg-gray-900 dark:text-gray-100}\""
    },
    {
      "name": "transition",
      "snippet": "class=\"transition ${1:duration-200} ${0:ease-in-out}\""
    },
    {
      "name": "@apply",
      "snippet": "@apply ${0};"
    },
    {
      "name": "@layer components",
      "snippet": "@layer components {\n  .${1:btn} {\n    @apply ${0};\n  }\n}"
    },
    {
      "name": "screen breakpoint",
      "snippet": "@screen ${1:md} {\n  ${0}\n}"
    }
  ],
  "css_ls": [
    {
      "name": "@apply",
      "snippet": "@apply ${0};"
    },
    {
      "name": "@layer base",
      "snippet": "@layer base {\n  ${0}\n}"
    },
    {
      "name": "@layer components",
      "snippet": "@layer components {\n  .${1:btn} {\n    @apply ${0};\n  }\n}"
    },
    {
      "name": "@layer utilities",
      "snippet": "@layer utilities {\n  .${1:name} {\n    ${0}\n  }\n}"
    },
    {
      "name": "tailwind directives",
      "snippet": "@tailwind base;\n@tailwind components;\n@tailwind utilities;${0}"
    }
  ]
}