craigerskine · August 26, 2022 19:47
diff --git a/twind.html b/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:[email protected]&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>
	<!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:[email protected]&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>