Skip to content

Instantly share code, notes, and snippets.

@craigerskine

craigerskine/twind.config.js

Last active March 9, 2022 13:57
Show Gist options
  • Save craigerskine/ecc4b4cbe18f6f6f0c337003a1049c07 to your computer and use it in GitHub Desktop.
Save craigerskine/ecc4b4cbe18f6f6f0c337003a1049c07 to your computer and use it in GitHub Desktop.
Download ZIP
Twind over CDN or skypack
Raw
twind.config.js
import { tw, setup, theme, silent } from 'https://cdn.skypack.dev/twind'
import { css, apply } from 'https://cdn.skypack.dev/twind/css'
import * as colors from 'https://cdn.skypack.dev/twind/colors'
import { observe } from 'https://cdn.skypack.dev/twind/observe'
setup({
mode: silent,
theme: {
extend: {
colors: {
gray: colors.gray,
pri: colors.indigo,
},
fontFamily: (theme) => ({
sans: 'Inter,'+ theme('fontFamily.sans'),
mono: 'Inconsolata,'+ theme('fontFamily.mono'),
}),
keyframes: {
'spin_alt': {
'0%, 75%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
},
animation: {
'spin-alt': 'spin_alt 3s ease-in-out infinite',
},
},
},
plugins: {
'bg-grid': { 'background-image': 'url("data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 4 4\' width=\'4\' height=\'4\'><rect x=\'0\' y=\'0\' width=\'2\' height=\'2\' fill=\'rgba(5,5,5,.33)\'></rect></svg>")', },
},
})
tw(() => ({
'@global': {
':root h1': { '@apply': 'font-bold text(center white 2xl) md:(text(5xl primary-200))', },
},
}))
observe(document.documentElement)
document.documentElement.removeAttribute('hidden')
// https://www.flems.io/#0=N4IgtglgJlA2CmIBcBWADAOgBxYDQgDMIEBnZAbVADsBDMRJEDAKzPwGMB7KgF3l+QgIYAA6cATjwAEwKTwDuuKSXg8AriKU8AFvHpKSxftIC+UguM5gpAcm08eIkkgD0L9lCoYSAawCeIjTsPhhQ8ABuLgoQVFA2ADpUwmKSMlLsJCRKNCIisH5SZhZWtvaOzm4eXr4BQSFhkdGx7pkJSaIS0gBUUjQk6ZywEv3F1nYOTq7unt7+gcGhEVHyMVDug8NtyZ1pnABGKuLh8IXmlmNlk5UzNfP1S01r+4fHbYkq6iIAFMCJUlJgThhJDKIy8XB-OS6egg35Uf7-eAADz4sVhkIRAyG4mcMgxmKkAHNxDQ-CCuNiSBhiaSIfCCf8ROJhDRxGSscMMKsIITOHSGSZ+QSCNweAAxOjEdlfHR6eAASikAF4AHxSH74zEkGhUXE2ACSvHg4lwNgA1FC5V8bCLeBLIPlvDqSDZ5UKGYCqJwQQaqFxdYMaDwaKaLbL6NbbeLJY7PZxXe6ESY3ZqpD54H4LHR4Li4Qz-jYSCIYgB9GiwHg2dH0-O2NAAUiUAHYUPWq2keCTdSLxGAfZZg3wvmgwoT5TZComGTYAIxoBvt2Sd509vu2AdB+BfADMADYR-AxxPBan-iea0mp712kGINxq7XC8WqABacuVn1F0vvqTb-rwPp4BfGIX04NRpBiIgkj4Gwr3PTF4MnSE8jUQkYlzfEbD2QkX2JaBF1sPY6mJMDYmAsAaEJeB2xsNRxFgL54hAKAgxoJAWSolwSHCQkzSRMBYFwAAebjCSkfjYF1JV4nicZHCmeRFIweRtwwCRCRcAAmec0C4niZIncIIHgeQACFOCRaTZLQKQbIAFikOyDKkFYoB0KybCc2SpF0Hl7A8rybBVITxHgdhpEsgy0GcvwPOi7zXPcgzNOc3zCX85LnKIWBYA88RCSIr4UFwYriowTT5QM4KXFC8LqtElUmPHJREPPZNEkSBQvi+RVVXVPNbAAAUJIYiNgRdMKQSxOGkbQZwImxBpyPI-BoqMXz2QYoDkZEeC+dhjGNFztAgPgpE0pFYEVMAoCQGVdqKy6pCZFk2RfbS0HlZqkPpNqvo6r0DmNY4vigTh2DUeheFCcHIeMABRBAoZ4SrYlh5GYYh5HEblaHQsBY4AEEHGZPZwK3OxoDCKhXQBsGseMDBNqgPwuSoKhjQACQAFQAWQAGWVKQAANISEiiYnSWA+hIaSQG0F8SHYUL+HMBAkTV5EXwpKRTr0EhtcO8QpGYNQSB4CACD8Q2jXEJjGovIS5pVbmTv6CB+m5lZYgAQiElxnfxISRClmW5bAa25xcl8Z00nyY7j7CX2fHwX3QGzLDUWJ4G2nUWT4RXnzfCt7f9kQHcxISoAgcJQ8yOXsK+F6KLegBOeciWZKBFSIJEc913VVBfGyAC8X3IGOAF17bFlwJaoB3hZAfAVAQcK711QQ7JQJBtJAExJ5MIA
Raw
twind.html
<!doctype html>
<html lang="en" class="bg-gray-100 text-gray-700" hidden>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Title</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;400;700;900&amp;display=swap" rel="stylesheet" />
</head>
<body class="">
<div id="page" class="min-h-screen flex flex-col divide(y gray-500 opacity-10)" v-cloak>
<header class="p-4">
<nav>
<!-- twind grouping class(...) twind one-offs class-[value] -->
<ul class="text-sm flex(& wrap) space-x-6 justify-center md:(text-lg)">
<li v-for="i in 3"><a href="#" class="font-bold text-indigo-500 transition hover:(text-indigo-900) focus:(text-indigo-900)">Nav {{ i }}</a></li>
</ul>
</nav>
</header>
<main class="px-4 py-8">
<section class="mx-auto max-w-prose">
<h1 class="mb-5 font-bold text-2xl tracking-wider first-line::(font-black bg-gray-900 text-gray-300) md:(text-[calc(2vw+2vh)] leading-snug)">Heading looks like this and is a one-off scale to vw+vh</h1>
<p class="mb-5 text-xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">Maiores quasi itaque</a> at cupiditate provident, fugit laudantium fuga magnam ducimus ipsam est sed sunt repellendus, in iste maxime amet!</p>
<ul>
<li v-for="i in 3">
List item {{ i }}
<ul v-if="i == 2">
<li v-for="i in 3">Sub list {{ i }}</li>
</ul>
</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Aspernatur ullam soluta delectus maiores, quae repellat fuga hic dignissimos quam. Minima vel magni reiciendis libero delectus totam quis? Soluta, molestiae deleniti?</p>
<table>
<thead>
<tr>
<th v-for="i in 3">Header {{ i }}</th>
</tr>
</thead>
<tbody>
<tr v-for="i in 3">
<td v-for="i in 3">Cell {{ i }}</td>
</tr>
</tbody>
</table>
<hr />
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis sapiente laboriosam, similique quos minima facere alias odio autem recusandae quisquam doloribus, rem qui sit eius tempore numquam? Dignissimos, corporis, praesentium.</p>
</section>
</main>
<footer class="mt-auto py-8 px-4 text(xs right) font-bold uppercase">
<div class="container mx-auto">
Made with
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" role="img" class="-mt-1 mx-1 fill-current text-red-400 inline-block">
<title>Love</title>
<polygon points="8 3 11 0 12 0 16 4 16 5 9 12 7 12 0 5 0 4 4 0 5 0" transform="translate(0,2)"></polygon>
</svg>
by <a href="https://craigerskine.com/" class="mx-1 text-current transition">Craig Erskine</a>
</div>
</footer>
</div>
<div class="dark:(bg-gradient-to-b from-transparent via-transparent to-white fixed inset-0 z-[-1])" aria-hidden="true"><div class="dark:(bg(grid fixed) absolute inset-0)"></div></div>
<script src="https://cdn.jsdelivr.net/combine/npm/twind/twind.umd.js,npm/twind/observe/observe.umd.js,npm/twind/colors/colors.umd.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/holderjs"></script>
<script src="https://unpkg.com/@fortawesome/fontawesome-free/js/all.min.js"></script>
<script>
// data
var app = new Vue({
el: '#page',
data() {
return {
// put your data here
}
},
methods: {},
computed: {},
});
twind.setup({
mode: "silent",
theme: {
extend: {
colors: {
gray: twindColors.gray,
primary: twindColors.indigo,
},
fontFamily: (theme) => ({
sans: 'Inter,'+ theme('fontFamily.sans'),
mono: 'Inconsolata,'+ theme('fontFamily.mono'),
}),
},
},
plugins: {
'scroll-smooth': { 'scroll-behavior': 'smooth' },
'ratio-16x9': { '@apply': 'pb-[56.25%] overflow-hidden relative' },
'ratio-4x3': { '@apply': 'pb-[75%] overflow-hidden relative' },
'bg-grid': { 'background-image': 'url("data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 4 4\' width=\'4\' height=\'4\'><rect x=\'0\' y=\'0\' width=\'2\' height=\'2\' fill=\'rgba(128,128,128,.1)\'></rect></svg>")', },
},
})
twind.tw(() => ({
'@global': {
//hack to override the required global reset
'a:not([class])': { '@apply': 'text-indigo-500 hover:(text-indigo-400 underline) focus:(text-indigo-400 underline) font-bold transition', },
'p:not([class]),ul:not([class]),ol:not([class]),table:not([class])': { '@apply': 'mb-5 border-current', },
'ul:not([class]) ul:not([class]),ul:not([class]) ol:not([class]),ol:not([class]) ol:not([class]),ol:not([class]) ul:not([class])': { '@apply': 'mb-0', },
'ul:not([class])': { '@apply': 'ml-5 list-disc', },
'ol:not([class])': { '@apply': 'ml-5 list-decimal', },
'hr:not([class])': { '@apply': 'mb-5 border-current opacity-25', },
'h1:not([class]),h2:not([class]),h3:not([class]),h4:not([class]),h5:not([class]),h6:not([class])': { '@apply': 'mb-5 text-4xl text-gray-900 font-bold', },
'h2:not([class])': { '@apply': 'text-3xl', },
'h3:not([class])': { '@apply': 'text-2xl', },
'h4:not([class])': { '@apply': 'text-xl', },
'h5:not([class])': { '@apply': 'text-lg', },
'h6:not([class])': { '@apply': 'text-base', },
'table:not([class])': { '@apply': 'w-full divide(y gray-600 opacity-25)', },
'table:not([class]) thead tr': { '@apply': 'text-sm uppercase opacity-50', },
'table:not([class]) th,table:not([class]) td': { '@apply': 'py-1 px-4 text-left', },
'table:not([class]) tbody': { '@apply': 'divide(y gray-500 opacity-25)', },
// even odd rows - this will not be needed in TW3
//'table:not([class]) tbody tr:nth-child(even)': { '@apply': 'bg-gray-400 bg-opacity-10', },
// vue cloak
':root [v-cloak]': { '@apply': 'hidden', },
}
}))
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