Skip to content

Instantly share code, notes, and snippets.

@mijustin
Last active September 20, 2018 19:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mijustin/33fdddad5022ccb04d91df45b2924310 to your computer and use it in GitHub Desktop.
Save mijustin/33fdddad5022ccb04d91df45b2924310 to your computer and use it in GitHub Desktop.
A User Snippet for Visual Studio Code for creating a HTML boilerplate for Tailwind CSS projects

Tailwind CSS - HTML boilerplate for Visual Studio Code

{
"Tailwind Boilerplate": {
	"prefix": "tail",
	"body": [
		"<!doctype html>",
		"<html lang='en'>",
			"\t<head>",
				"\t\t<meta charset='utf-8'>",
				"\t\t<meta http-equiv='x-ua-compatible' content='ie=edge'>",
				"\t\t<title>ChangeMe</title>",
				"\t\t<meta name='description' content=''>",
				"\t\t<meta name='viewport' content='width=device-width, initial-scale=1'>",
				"\t\t<link href='https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css' rel='stylesheet'>",
			"\t</head>",
			"\t<body class='h-screen font-sans'>",
				"\t\t<article class='container mx-auto px-4 font-serif text-grey-darkest leading-normal'>",
					"\t\t\t<header class='max-w-lg mx-auto my-8 text-center'>",
						"\t\t\t\t<h1 class='font-large'>Title</h1>",
					"\t\t\t</header>",
				"\t\t<main class='md:w-1/2 md:mx-auto'>",
					"\t\t\t\t<p class='font-normal'>Text</p>",
				"\t\t\t</main>",
				"\t\t</article>",
			"\t</body>",
		"</html>"
	],
	"description": "Creates Tailwind CSS HTML Boilerplate"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment