{"id":13433680,"url":"https://github.com/jjranalli/nightwind","last_synced_at":"2025-05-15T13:06:14.880Z","repository":{"id":42385227,"uuid":"311431275","full_name":"jjranalli/nightwind","owner":"jjranalli","description":"An automatic, customisable, overridable Tailwind dark mode plugin","archived":false,"fork":false,"pushed_at":"2024-04-30T21:10:45.000Z","size":61,"stargazers_count":732,"open_issues_count":35,"forks_count":46,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-13T16:13:28.357Z","etag":null,"topics":["css","dark-mode","dark-theme","tailwind","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://nightwindcss.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jjranalli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jjranalli"}},"created_at":"2020-11-09T18:36:19.000Z","updated_at":"2025-05-13T12:22:06.000Z","dependencies_parsed_at":"2024-01-13T14:36:17.008Z","dependency_job_id":"ecf74f52-3eff-4eae-86dd-c882d2bf44fa","html_url":"https://github.com/jjranalli/nightwind","commit_stats":{"total_commits":75,"total_committers":8,"mean_commits":9.375,"dds":"0.18666666666666665","last_synced_commit":"d486029d51ebb063f2922efc086e436b1ebdbecb"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjranalli%2Fnightwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjranalli%2Fnightwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjranalli%2Fnightwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjranalli%2Fnightwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jjranalli","download_url":"https://codeload.github.com/jjranalli/nightwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254071335,"owners_count":22009773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dark-mode","dark-theme","tailwind","tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-31T02:01:32.952Z","updated_at":"2025-05-15T13:06:14.856Z","avatar_url":"https://github.com/jjranalli.png","language":"JavaScript","readme":"![Nightwind cover image](https://github.com/jjranalli/nightwind-demo/raw/master/nightwindcss.com/public/nightwind-logotext.png)\n\nA Tailwind CSS plugin that gives you an **out-of-the-box, customisable, overridable dark mode.**\n\n---\n\nNightwind uses the existing Tailwind color palette and your own custom colors to automatically generate the dark mode version of the Tailwind color classes you use.\n\nFor example, whenever you use a class like **bg-red-600** it gets automatically switched to **bg-red-300** in dark mode.\n\nYou can see it in action on https://nightwindcss.com\n\n1. [Installation](#installation)\n2. [Helper functions](#helper-functions)\n3. [Getting started](#getting-started)\n4. [Configuration](#configuration)\n   - [Colors](#colors)\n   - [Variants and color classes](#variants-and-color-classes)\n   - [The 'nightwind-prevent' class](#the-nightwind-prevent-class)\n   - [Transitions](#transitions)\n   - [Custom color scale](#custom-color-scale)\n   - [Important selector](#important-selector)\n5. [Color mappings](#color-mappings)\n   - [Individual colors](#individual-colors)\n   - [Color classes](#color-classes)\n   - [Hybrid mapping](#hybrid-mapping)\n6. [Overrides](#overrides)\n7. [Typography](#typography)\n\n## Installation\n\n```sh\nnpm install nightwind\n```\n\nEnable the Dark class variant in your tailwind.config.js file.\n\n```js\n// tailwind.config.js - Tailwind ^2.0\nmodule.exports = {\n  darkMode: \"class\",\n  // ...\n  plugins: [require(\"nightwind\")],\n}\n```\n\n#### In older Tailwind versions (\u003c 2.0)\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  experimental: {\n    darkModeVariant: true,\n    applyComplexClasses: true,\n  },\n  dark: \"class\",\n  // ...\n  plugins: [require(\"nightwind\")],\n}\n```\n\n## Helper functions\n\nNightwind relies on a fixed **'nightwind' class** to manage transitions, and a toggled **'dark' class** applied on a top level element in the DOM, typically the root element.\n\nYou can define your own functions to manage the dark mode (or check the [examples](#examples) below), or use the helper functions included in 'nightwind/helper.js' to get started right away.\n\nBy default, the helper functions prevent [the dreaded flicker of light mode](https://www.joshwcomeau.com/react/dark-mode/#our-first-hurdle) and allow the chosen color mode to persist on update.\n\n### Initialization\n\nTo initialize nightwind, **add the following script tag to the head element of your pages**.\n\n```js\n// React Example\nimport nightwind from \"nightwind/helper\"\n\nexport default function Layout() {\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        \u003cscript dangerouslySetInnerHTML={{ __html: nightwind.init() }} /\u003e\n      \u003c/Head\u003e\n      // ...\n    \u003c/\u003e\n  )\n}\n```\n\n### Toggle\n\nSimilarly, you can use the `toggle` function to switch between dark and light mode.\n\n```js\n// React Example\nimport nightwind from \"nightwind/helper\"\n\nexport default function Navbar() {\n  return (\n    // ...\n    \u003cbutton onClick={() =\u003e nightwind.toggle()}\u003e\u003c/button\u003e\n    // ...\n  )\n}\n```\n\n### Enable mode\n\nIf you need to selectively choose between light/dark mode, you can use the `enable` function. It accepts a boolean argument to enable/disable dark mode.\n\n```js\n// React Example\nimport nightwind from \"nightwind/helper\"\n\nexport default function Navbar() {\n  return (\n    // ...\n    \u003cbutton onClick={() =\u003e nightwind.enable(true)}\u003e\u003c/button\u003e\n    // ...\n  )\n}\n```\n\n### BeforeTransition\n\nNightwind also exports a `beforeTransition` function that you can leverage in case you prefer to build your own toggle functions. It prevents unwanted transitions as a side-effect of having nightwind class in the html tag.\n\nCheck out the `toggle` function in the [Nextjs example below](#examples) for an example of how this could be implemented.\n\n### Examples\n\nSee examples of implementation (click to expand):\n\n\u003cdetails\u003e\n  \u003csummary\u003eNext.js (using the \u003ca href=\"https://github.com/pacocoursey/next-themes\"\u003enext-themes\u003c/a\u003e library)\u003c/summary\u003e\n  \n  #### _app.js\n\nAdd ThemeProvider using the following configuration\n\n```js\nimport { ThemeProvider } from \"next-themes\"\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003cThemeProvider\n      attribute=\"class\"\n      storageKey=\"nightwind-mode\"\n      defaultTheme=\"system\" // default \"light\"\n    \u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/ThemeProvider\u003e\n  )\n}\n\nexport default MyApp\n```\n\n#### Toggle\n\nSet it up using the useTheme hook\n\n```js\nimport { useTheme } from \"next-themes\"\nimport nightwind from \"nightwind/helper\"\n\nexport default function Toggle(props) {\n  const { theme, setTheme } = useTheme()\n\n  const toggle = () =\u003e {\n    nightwind.beforeTransition()\n    if (theme !== \"dark\") {\n      setTheme(\"dark\")\n    } else {\n      setTheme(\"light\")\n    }\n  }\n\n  return \u003cbutton onClick={toggle}\u003eToggle\u003c/button\u003e\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eCreate React App (using the \u003ca href=\"https://github.com/nfl/react-helmet\"\u003ereact-helmet\u003c/a\u003e library)\u003c/summary\u003e\n  \n  #### index.jsx\n\nAdd Helmet using the following configuration\n\n```js\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { Helmet } from \"react-helmet\"\nimport nightwind from \"nightwind/helper\"\n\nimport App from \"./App\"\nimport \"./index.css\"\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cHelmet\u003e\n      \u003cscript\u003e{nightwind.init()}\u003c/script\u003e\n    \u003c/Helmet\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n)\n```\n\n#### Toggle\n\nSet it up using the default example\n\n```js\nimport nightwind from \"nightwind/helper\"\n\nexport default function Navbar() {\n  return (\n    // ...\n    \u003cbutton onClick={() =\u003e nightwind.toggle()}\u003e\u003c/button\u003e\n    // ...\n  )\n}\n```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n  \u003csummary\u003ePure JavaScript or Alpine.js\u003c/summary\u003e\n  \nThe whole idea is to deconstruct helper.js, converting it from a module to a var. And unpacking the 'init' function from within helper to be its own script body to execut at DOM render. Here is the code for that at the time of writing (Oct 14th 2021). As long as the classes made it to tailwind.css (did you configure the plugins right?) then this will enable `nightwind.toggle()` and `nightwind.enable()`\n   \n```js\n\u003cscript\u003e\nvar nightwind = {\n  beforeTransition: () =\u003e {\n    const doc = document.documentElement;\n    const onTransitionDone = () =\u003e {\n      doc.classList.remove('nightwind');\n      doc.removeEventListener('transitionend', onTransitionDone);\n    }\n    doc.addEventListener('transitionend', onTransitionDone);\n    if (!doc.classList.contains('nightwind')) {\n      doc.classList.add('nightwind');\n    }\n  },\n\n  toggle: () =\u003e {\n    nightwind.beforeTransition();\n    if (!document.documentElement.classList.contains('dark')) {\n      document.documentElement.classList.add('dark');\n      window.localStorage.setItem('nightwind-mode', 'dark');\n    } else {\n        document.documentElement.classList.remove('dark');\n        window.localStorage.setItem('nightwind-mode', 'light');\n    }\n  },\n\n  enable: (dark) =\u003e {\n    const mode = dark ? \"dark\" : \"light\";\n    const opposite = dark ? \"light\" : \"dark\";\n\n    nightwind.beforeTransition();\n\n    if (document.documentElement.classList.contains(opposite)) {\n      document.documentElement.classList.remove(opposite);\n    }\n    document.documentElement.classList.add(mode);\n    window.localStorage.setItem('nightwind-mode', mode);\n  },\n }\n\u003c/script\u003e\n\u003cscript\u003e\n(function() {\n  function getInitialColorMode() {\n          const persistedColorPreference = window.localStorage.getItem('nightwind-mode');\n          const hasPersistedPreference = typeof persistedColorPreference === 'string';\n          if (hasPersistedPreference) {\n            return persistedColorPreference;\n          }\n          const mql = window.matchMedia('(prefers-color-scheme: dark)');\n          const hasMediaQueryPreference = typeof mql.matches === 'boolean';\n          if (hasMediaQueryPreference) {\n            return mql.matches ? 'dark' : 'light';\n          }\n          return 'light';\n  }\n  getInitialColorMode() == 'light' ? document.documentElement.classList.remove('dark') : document.documentElement.classList.add('dark');\n})()\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\n## Getting started\n\nThis is some examples of what Nightwind does by default:\n\n- 'bg-white' in dark mode becomes 'bg-black'\n- 'bg-red-50' in dark mode becomes 'bg-red-900'\n- 'ring-amber-100' in dark mode becomes 'ring-amber-800'\n- 'placeholder-gray-200' in dark mode becomes 'placeholder-gray-700'\n- 'hover:text-indigo-300' in dark mode becomes 'hover:text-indigo-600'\n- 'sm:border-lightBlue-400' in dark mode becomes 'sm:border-lightBlue-500'\n- 'xl:hover:bg-purple-500' in dark mode becomes 'xl:hover:bg-purple-400'\n\n### Supported classes\n\nDue to file size considerations, Nightwind is enabled by default only on the **'text'**, **'bg'** and **'border'** color classes, as well as their **'hover'** variants.\n\nYou can also extend Nightwind to other classes and variants:\n\n- **Color classes**: 'placeholder', 'ring', 'ring-offset', 'divide', 'gradient'\n- **Variants**: all Tailwind variants are supported\n\n## Configuration\n\n### Colors\n\nNightwind switches between opposite color weights when switching to dark mode. So a -50 color gets switched with a -900 color, -100 with -800 and so forth.\n\n\u003e Note: Except for the -50 and -900 weights, the sum of opposite weights is always 900. To customise how Nightwind inverts colors by default, see [how to set up a custom color scale](#custom-color-scale)\n\nIf you add your custom colors in tailwind.config.js using number notation, Nightwind will treat them the same way as Tailwind's colors when switching into dark mode.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          50: \"#caf0f8\", // becomes primary-900 in dark mode\n          300: \"#90e0ef\", // becomes primary-600 in dark mode\n          600: \"#0077b6\", // becomes primary-300 in dark mode\n          900: \"#03045e\", // becomes primary-50 in dark mode\n        },\n      },\n    },\n  },\n}\n```\n\nCheck out [**color mappings**](#color-mappings) to see how to further customize your dark theme.\n\n### Variants and color classes\n\nVariants and other color classes can be enabled for Nightwind like so:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  // ...\n  theme: {\n    nightwind: {\n      colorClasses: [\n        \"gradient\",\n        \"ring\",\n        \"ring-offset\",\n        \"divide\",\n        \"placeholder\",\n      ],\n    },\n  },\n  variants: {\n    nightwind: [\"focus\"], // Add any Tailwind variant\n  },\n  // ...\n}\n```\n\nThe 'gradient' color class enables Nightwind for the 'from', 'via' and 'to' classes, allowing **automatic dark gradients**.\n\n### The 'nightwind-prevent' class\n\nIf you want an element to remain exactly the same in both light and dark modes, you can achieve this in Nightwind by adding a **'nightwind-prevent'** class to the element.\n\n\u003e Note: if you only want some of the colors to remain unchanged, consider using [overrides](#overrides).\n\nTo prevent all children of an element to remain unchanged in dark mode, you can add the **'nightwind-prevent-block'** class to the element. All descandant nodes of the element will be prevented from switching.\n\nYou can customize the name of both classes in your tailwind.config.js file\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      fixedClass: \"prevent-switch\", // default 'nightwind-prevent'\n      fixedBlockClass: \"prevent-switch-block\", // default 'nightwind-prevent-block'\n    },\n  },\n}\n```\n\n\u003e Note: The 'nightwind-prevent' class doesn't work with @apply, so always add it in the html.\n\n### Transitions\n\nNightwind by default applies a '300ms' transition to all color classes. You can customize this value in your tailwind.config.js file, through the **transitionDuration** property.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      transitionDuration: \"500ms\", // default '300ms'\n    },\n  },\n}\n```\n\nIf you wish to disable transition for a single class, you can add the 'duration-0' class to the element (it's already included in Nightwind).\n\nIf you wish to disable the generation of all transition classes, you can do so by setting the same value to false.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      transitionDuration: false, // default '300ms'\n    },\n  },\n}\n```\n\n#### Transition Classes\n\nNightwind by default generates transition classes for 'text', 'bg' and 'border' color classes. This should make most elements transition smoothly without affecting performances.\n\nIn your configuration file you can also set the **transitionClasses** property to 'full' to enable generation of transition classes for all color classes used throughout your website (i.e. rings, divide and placeholder).\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      transitionClasses: \"full\", // default ['text, 'bg', 'border']\n    },\n  },\n}\n```\n\nAlternatively, you can also specify which color classes you'd like to generate transition classes for.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      transitionClasses: [\"bg\", \"ring\"], // default ['text, 'bg', 'border']\n    },\n  },\n}\n```\n\n### Custom color scale\n\nThis configuration allows you to define how one or more color weights convert in dark-mode. Note that these **affects all color classes**.\n\nFor example, you could make all -100 colors switch into -900 colors like so.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      colorScale: {\n        100: 900, // default 800\n      },\n    },\n  },\n}\n```\n\n\u003e Note: These settings can still be overridden for specific colors using [color mappings](#color-mappings), or in specific elements with [overrides](#overrides)\n\n#### Reduced preset\n\nThis preset simulates how Nightwind would behave without the -50 color classes. Any -50 color will essentially appear the same as -100 colors (both becomes -900)\n\nThis behaviour may be desirable for two main reasons:\n\n- Makes the reversed -800 and -900 colors darker and more different between themselves.\n- -500 colors remain the same in both dark and light mode\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      colorScale: {\n        preset: \"reduced\",\n      },\n    },\n  },\n}\n```\n\nThis is the corresponding scale:\n\n```js\n// tailwind.config.js\ncolorScale: {\n  50: 900,\n  100: 900,\n  200: 800,\n  300: 700,\n  400: 600,\n  500: 500,\n  600: 400,\n  700: 300,\n  800: 200,\n  900: 100,\n},\n```\n\n\u003e Note: When using a preset, specific weights will be ignored.\n\n### Important selector\n\nIf you're using the [important ID selector strategy](https://tailwindcss.com/docs/configuration#selector-strategy) in your config, such as\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  important: \"#app\",\n}\n```\n\nPlease note that Nightwind assumes that the #app element is a parent of the element which contains the toggled 'dark' and 'nightwind' classes.\n\nIf you're applying the 'important ID selector' to the same element that contains both the 'nightwind' and the toggled 'dark' classes (typically the root element), enable the following setting:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      importantNode: true,\n    },\n  },\n}\n```\n\n\u003e Note: [Overrides](#overrides) will stop working as they always assume a parent-child relationship between elements.\n\n## Color mappings\n\nColor mappings allow you to fine-tune your dark theme, change colors in batch and control how Nightwind behaves in dark mode. You set them up like this:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      colors: {\n        // Color mappings go here\n      },\n    },\n  },\n}\n```\n\nThere are two main ways to map colors in Nightwind: using **individual colors** or **color classes**.\n\n### Syntax\n\nYou can use the following syntax to specify colors:\n\n- Individual colors: in hex '#fff', Tailwind-based color codes 'red.100', or using CSS variables 'var(--primary)'\n- Color classes: such as 'red' or 'gray'\n\n### Individual colors\n\nYou can use this to set individual dark colors, directly from tailwind.config.js\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      colors: {\n        white: \"gray.900\",\n        black: \"gray.50\",\n        red: {\n          100: \"#1E3A8A\", // or 'blue.900'\n          500: \"#3B82F6\", // or 'blue.500'\n          900: \"#DBEAFE\", // or 'blue.100'\n        },\n        primary: \"var(--secondary)\",\n        secondary: \"var(--primary)\",\n      },\n    },\n  },\n}\n```\n\n- When a mapping is not specified, Nightwind will fallback to the default dark color (red-100 becomes #1E3A8A, while red-200 becomes red-700)\n\n\u003e Note: Contrarily to all other cases, when you individually specify a dark color this way nightwind doesn't automatically invert the color weight. The same is also valid for [overrides](#overrides).\n\n### Color classes\n\nThis is useful when you want to switch a whole color class in one go. Consider the following example:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      colors: {\n        red: \"blue\",\n        yellow: \"primary\",\n        pink: \"yellow.500\",\n      },\n    },\n    extend: {\n      colors: {\n        primary: {\n          50: \"#caf0f8\",\n          300: \"#90e0ef\",\n          600: \"#0077b6\",\n          900: \"#03045e\",\n        },\n      },\n    },\n  },\n}\n```\n\n- All red color classes become blue in dark mode, with inverted weight (red-600 becomes blue-300);\n- Yellow colors in dark mode will switch to the 'primary' custom color with inverted weights, **when available** (yellow-300 becomes primary-600, but yellow-200 becomes yellow-700)\n- Notably, if you map a color class such as 'pink' to an individual color such as 'yellow.500', all pink color classes will become yellow-500 regardless of the color weight.\n\n### Hybrid mapping\n\nYou can even specify a default dark color for a color class, as well as individual colors for specific weights. You can do so by specifying a default value for a color class.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      colors: {\n        rose: {\n          default: \"blue\",\n          200: \"yellow.300\",\n        },\n      },\n    },\n  },\n}\n```\n\n## Overrides\n\nThe default dark variant allows you to write classes like 'dark:bg-gray-200' (not necessarily related to color classes) that only gets applied when you switch into dark mode.\n\nThe 'dark' variant can be used to override the automatic Nightwind classes.\n\n```html\n\u003ch2 class=\"text-gray-900 dark:text-yellow-200\"\u003eI'm yellow in dark mode\u003c/h2\u003e\n```\n\n\u003e Note: The 'dark' variant can also be concatenated with both screens and other variants, so you can write classes like 'sm:dark:hover:text-yellow-200'.\n\nPlease refer to the [Tailwind official documentation](https://tailwindcss.com/docs/dark-mode) to learn more about the 'dark' variant.\n\n## Typography\n\nIf you're using the [Typography plugin](https://github.com/tailwindlabs/tailwindcss-typography), you can let Nightwind build an automatic dark mode of all typography color styles.\n\n\u003e Note: It will respect all customizations and [color mappings](#color-mappings) specified in your nightwind configuration.\n\nSimply add the following line in your Nightwind theme configuration:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      typography: true,\n    },\n  },\n}\n```\n\nTo fine-tune your typography dark mode, you can define the single classes by using the [individual color syntax](#individual-colors) (either hex or tailwind-based color codes).\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    nightwind: {\n      typography: {\n        color: \"blue.400\",\n        h1: {\n          color: \"#90e0ef\",\n        },\n        indigo: {\n          a: {\n            color: \"purple.300\",\n          },\n        },\n      },\n    },\n  },\n}\n```\n","funding_links":["https://github.com/sponsors/jjranalli"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjjranalli%2Fnightwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjjranalli%2Fnightwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjjranalli%2Fnightwind/lists"}