added Nightwind dark mode

tailwindcss.com/README.md

@@ -1,29 +1,3 @@
-# Tailwind CSS Documentation
+# Tailwind CSS Website - Nightwind dark mode
 
-Tailwind CSS uses [Next.js](https://nextjs.org/) for its documentation. Here is how you can run the project locally:
-
-1. Clone this repo
-
-    ```sh
-    git clone https://github.com/tailwindlabs/tailwindcss.com.git
-    ```
-
-2. Go into the project root directory
-
-    ```sh
-    cd tailwindcss.com
-    ```
-
-3. Install JS dependencies
-
-    ```sh
-    yarn
-    ```
-
-4. Start the dev server
-
-    ```sh
-    yarn dev
-    ```
-
-Alternatively you can generate a static export of the documentation using the `yarn export` command. The export will be saved in the `out` folder.
+This is a clone of the original Tailwind CSS website, which also has an automatic dark mode generated using Nightwind.

tailwindcss.com/package.json

@@ -21,7 +21,7 @@
     "@reach/rect": "^0.10.5",
     "@sindresorhus/slugify": "^1.1.0",
     "@svgr/webpack": "^5.4.0",
-    "@tailwindcss/typography": "^0.0.0-caa70b6",
+    "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.0.2",
     "babel-plugin-preval": "^5.0.0",
     "brotli-size": "^4.0.0",
@@ -42,6 +42,8 @@
     "just-group-by": "^1.0.0",
     "minimatch": "^3.0.4",
     "next": "^10.0.1",
+    "next-themes": "0.0.10",
+    "nightwind": "^1.1.5",
     "postcss": "^8.1.7",
     "postcss-focus-visible": "^5.0.0",
     "postcss-nested": "^4.2.3",

tailwindcss.com/src/components/Header.js

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { VersionSwitcher } from '@/components/VersionSwitcher'
 import { Search } from '@/components/Search'
+import Nightwind from '@/components/Nightwind'
 import clsx from 'clsx'
 import Router from 'next/router'
 import { Logo } from '@/components/Logo'
@@ -27,8 +28,9 @@ export function Header({ navIsOpen, onNavToggle }) {
           <Search />
           <div className="lg:w-64 pl-8 flex-shrink-0 flex items-center justify-end space-x-6">
             <VersionSwitcher className="hidden lg:block" />
+            <Nightwind size="h-7" />
             <a
-              href="https://github.com/tailwindlabs/tailwindcss"
+              href="https://github.com/jjranalli/nightwind"
               className="text-gray-400 hover:text-gray-500 transition-colors duration-200"
             >
               <span className="sr-only">Tailwind CSS on GitHub</span>

tailwindcss.com/src/components/Nightwind.js

@@ -0,0 +1,43 @@
+import { useTheme } from 'next-themes'
+
+export default function Nightwind(props) {
+  const { theme, setTheme } = useTheme()
+
+  const toggle = () => {
+    if (!document.documentElement.classList.contains('dark')) {
+      setTheme('dark')
+    } else {
+      setTheme('light')
+    }
+  }
+
+  return (
+    <svg
+      width="140"
+      height="140"
+      viewBox="0 0 140 140"
+      fill="none"
+      onClick={toggle}
+      className={`${props.size || 'h-10'} w-auto cursor-pointer group mx-auto z-10`}
+    >
+      <circle
+        cx="70"
+        cy="70"
+        r="70"
+        fill="currentColor"
+        className={`${theme === 'dark' ? 'text-yellow-600' : 'text-blue-600'}`}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M82.5612 138.876C55.6458 126.762 37 100.476 37 70C37 39.5244 55.6458 13.2383 82.5613 1.1239C115.227 7.04239 140 35.6281 140 70C140 104.372 115.227 132.958 82.5612 138.876Z"
+        fill="currentColor"
+        className={`${
+          theme === 'dark'
+            ? 'text-blue-400 group-hover:text-yellow-400'
+            : 'text-yellow-300 group-hover:text-blue-200'
+        }`}
+      />
+    </svg>
+  )
+}

tailwindcss.com/src/pages/_app.js

@@ -10,6 +10,7 @@ import Head from 'next/head'
 import twitterLargeCard from '@/img/twitter-large-card.jpg'
 import { ResizeObserver } from '@juggle/resize-observer'
 import 'intersection-observer'
+import { ThemeProvider } from 'next-themes'
 
 if (typeof window !== 'undefined' && !('ResizeObserver' in window)) {
   window.ResizeObserver = ResizeObserver
@@ -88,12 +89,14 @@ export default function App({ Component, pageProps, router }) {
           content={`https://tailwindcss.com${twitterLargeCard}`}
         />
       </Head>
-      {router.pathname !== '/' && (
-        <Header navIsOpen={navIsOpen} onNavToggle={(isOpen) => setNavIsOpen(isOpen)} />
-      )}
-      <Layout {...layoutProps}>
-        <Component {...pageProps} />
-      </Layout>
+      <ThemeProvider attribute="class" storageKey="nightwind-mode" defaultTheme="system">
+        {router.pathname !== '/' && (
+          <Header navIsOpen={navIsOpen} onNavToggle={(isOpen) => setNavIsOpen(isOpen)} />
+        )}
+        <Layout {...layoutProps}>
+          <Component {...pageProps} />
+        </Layout>
+      </ThemeProvider>
     </>
   )
 }

tailwindcss.com/src/pages/_document.js

@@ -8,12 +8,7 @@ export default class Document extends NextDocument {
 
   render() {
     return (
-      <Html
-        lang="en"
-        className={`text-gray-500 antialiased ${
-          this.props.dangerousAsPath.startsWith('/examples/') ? '' : 'bg-white'
-        }`}
-      >
+      <Html lang="en" className="nightwind antialiased">
         <Head>
           <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
           <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
@@ -22,7 +17,11 @@ export default class Document extends NextDocument {
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00b4b6" />
           <meta name="theme-color" content="#ffffff" />
         </Head>
-        <body>
+        <body
+          className={`text-gray-500 ${
+            this.props.dangerousAsPath.startsWith('/examples/') ? '' : 'bg-white'
+          }`}
+        >
           <Main />
           <NextScript />
           <script> </script>

tailwindcss.com/src/pages/docs/index.js

@@ -178,7 +178,7 @@ export default function DocsLandingPage() {
         <section className="md:col-span-3 flex flex-wrap md:flex-nowrap items-center bg-gray-800 shadow-lg rounded-2xl py-6 md:py-4 px-6 md:pr-5 space-y-4 md:space-y-0 md:space-x-8">
           <h2 className="flex-none">
             <span className="sr-only">Tailwind UI</span>
-            <TuiLogo className="w-40 h-auto" />
+            <TuiLogo className="w-40 h-auto text-white" />
           </h2>
           <p className="flex-auto text-white text-lg font-medium">
             <Widont>Beautiful UI components, crafted by the creators of Tailwind CSS</Widont>

tailwindcss.com/src/pages/index.js

@@ -18,6 +18,7 @@ import { Logo } from '@/components/Logo'
 import { Footer } from '@/components/home/Footer'
 import NextLink from 'next/link'
 import Head from 'next/head'
+import Nightwind from '@/components/Nightwind'
 
 function NpmInstallButton() {
   const [state, setState] = useState('idle')
@@ -94,8 +95,9 @@ export default function Home() {
                   <span className="hidden sm:inline">Documentation</span>
                 </a>
               </NextLink>
+              <Nightwind size="h-7" />
               <a
-                href="https://github.com/tailwindlabs/tailwindcss"
+                href="https://github.com/jjranalli/nightwind"
                 className="text-gray-400 hover:text-gray-500 transition-colors duration-200"
               >
                 <span className="sr-only">Tailwind CSS on GitHub</span>
@@ -142,8 +144,7 @@ export default function Home() {
                   href="https://adamwathan.me/css-utility-classes-and-separation-of-concerns/"
                   className="text-light-blue-600 font-semibold"
                   style={{
-                    boxShadow:
-                      'inset 0 -0.1666666667em 0 0 #fff, inset 0 -0.3333333333em 0 0 #bae6fd',
+                    boxShadow: 'inset 0 -0.16666666em 0 0 #bae6fd',
                   }}
                 >
                   a few thousand words

tailwindcss.com/tailwind.config.js

@@ -7,6 +7,10 @@ module.exports = {
   purge: ['./src/**/*.{js,mdx}'],
   darkMode: 'class',
   theme: {
+    nightwind: {
+      typography: true,
+      colorClasses: ['gradient', 'ring', 'ring-offset', 'divide', 'placeholder'],
+    },
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
@@ -166,7 +170,7 @@ module.exports = {
       }),
       boxShadow: {
         px: '0 0 0 1px rgba(0, 0, 0, 0.5)',
-        link: 'inset 0 -0.125em 0 0 #fff, inset 0 -0.375em 0 0 rgba(165, 243, 252, 0.4)',
+        link: 'inset 0 -0.2em 0 0 rgba(165, 243, 252, 0.4)',
       },
       keyframes: {
         'flash-code': {
@@ -197,12 +201,13 @@ module.exports = {
     },
   },
   variants: {
+    nightwind: ['group-hover', 'active', 'focus'],
     extend: {
       backgroundColor: ['odd', 'even', 'active'],
       borderWidth: ['first', 'last', 'hover', 'focus'],
       cursor: ['active'],
       opacity: ['disabled'],
-      textColor: ['group-focus'],
+      textColor: ['group-focus', 'group-hover'],
       ringWidth: ['focus-visible'],
       ringOffsetWidth: ['focus-visible'],
       ringOffsetColor: ['focus-visible'],
@@ -213,6 +218,7 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/typography'),
+    require('nightwind'),
     function ({ addUtilities, theme }) {
       const shadows = theme('boxShadow')
       addUtilities(