Skip to content

Instantly share code, notes, and snippets.

@craigerskine

craigerskine/twind.html

Last active August 26, 2022 19:47
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 craigerskine/bc16134cc3415fc3ed4fceccba1da65b to your computer and use it in GitHub Desktop.
Save craigerskine/bc16134cc3415fc3ed4fceccba1da65b to your computer and use it in GitHub Desktop.
Download ZIP
Twind Starter
Raw
twind.html
<!doctype html>
<html lang="en" class="motion-safe:(scroll-smooth)" hidden>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Tailwind + Twind</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.gstatic.com" rel="preconnect" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
</head>
<body class="bg-gray-50 text-gray-700 dark:(bg-gray-900 text-gray-400)">
<!-- START -->
<div class="app min-h-screen flex(& col)">
<header class="w-full flex-none">
<button type="button" onclick="document.documentElement.classList.toggle('dark'); return false;" class="w-9 h-9 flex fixed top-4 right-4 ring(1 current) rounded-full"><i class="fa fa-fw fa-lg fa-moon m-auto"></i></button>
</header>
<main class="p-4 w-full flex(& 1)">
<div class="m-auto p-6 w-full max-w-sm bg-white flex items-center space-x-4 rounded-xl shadow-lg dark:(bg-gray-800)">
<div class="shrink-0">
<i class="fa fa-fw fa-comments fa-3x text-pri-500 opacity-30 dark:(text-pri-400)"></i>
</div>
<div>
<div class="text-xl font-medium">ChitChat</div>
<div class="prose prose-pri"><p class="text-gray-500">You have a new <a href="#">message</a>!</p></div>
</div>
</div>
</main>
<footer class="mt-auto p-4 w-full text(gray-500 xs center) font-semibold uppercase flex-none"><a href="https://twind.dev/" class="link">Twind</a> is amazing!</footer>
</div>
<!-- /END -->
<script src="https://cdn.jsdelivr.net/combine/npm/twind/twind.umd.js,npm/twind/observe/observe.umd.js,npm/twind/colors/colors.umd.js,npm/@twind/typography/typography.umd.js"></script>
<script src="https://unpkg.com/@fortawesome/fontawesome-free/js/all.min.js"></script>
<script>
twind.setup({
mode: 'silent',
darkMode: 'class',
theme: {
extend: {
colors: {
// simple way to control a "brand" color
pri: twindColors.blue,
// extra colors
slate: twindColors.blueGray,
gray: twindColors.coolGray,
zinc: twindColors.gray,
neutral: twindColors.trueGray,
stone: twindColors.warmGray,
cyan: twindColors.cyan,
fuchsia: twindColors.fuchsia,
lime: twindColors.lime,
orange: twindColors.orange,
rose: twindColors.rose,
sky: twindColors.sky,
teal: twindColors.teal,
},
fontFamily: (theme) => ({
sans: 'Inter,'+ theme('fontFamily.sans'),
//mono: 'Inconsolata,'+ theme('fontFamily.mono'),
}),
},
},
plugins: {
...twindTypography(),
'scroll-smooth': { 'scroll-behavior': 'smooth' },
// plugin as alias
'link': `text-pri-500 font-semibold no-underline motion-safe:(transition) hover:(text-pri-800 !underline) dark:(text-pri-400 hover:(text-pri-100))`,
},
});
twind.tw(() => ({
'@global': {
'.prose': { '@apply': '!text-current dark:(text-current)' },
'.prose a': { '@apply': 'link', 'text-decoration': 'none !important' },
'.prose a:hover': { 'text-decoration': 'underline !important' },
}
}));
twindObserve.observe(document.documentElement);
document.documentElement.removeAttribute('hidden');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment