All Projects → ChanceArthur → Tailwindcss Dark Mode

ChanceArthur / Tailwindcss Dark Mode

Licence: mit
🌚 A Tailwind CSS plugin that adds variants for dark mode

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Tailwindcss Dark Mode

hugo-starter-tailwind-basic
A basic and simple to set up Hugo with TailwindCSS starter project.
Stars: ✭ 80 (-87.67%)
Mutual labels:  postcss, tailwindcss
sapper-postcss-template
A template that includes Sapper for Svelte and PostCSS preprocessing with Tailwind CSS
Stars: ✭ 84 (-87.06%)
Mutual labels:  postcss, tailwindcss
tailwind-theme-switcher
Basic demo on how to switch styles with Tailwind, handy for dark mode type purposes.
Stars: ✭ 164 (-74.73%)
Mutual labels:  dark-theme, tailwindcss
tailwind-bootstrap-grid
Tailwind CSS plugin that generates Bootstrap's flexbox grid
Stars: ✭ 96 (-85.21%)
Mutual labels:  postcss, tailwindcss
sapper-template-rollup
Starter Rollup template for Sapper apps using postcss, cssnano, tailwindcss, and svelte-preprocess.
Stars: ✭ 32 (-95.07%)
Mutual labels:  postcss, tailwindcss
building-realworld-user-interfaces-using-tailwind
Demo of building real-world UIs using TailwindCSS
Stars: ✭ 87 (-86.59%)
Mutual labels:  postcss, tailwindcss
nextal
Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Stars: ✭ 88 (-86.44%)
Mutual labels:  dark-theme, tailwindcss
postcss-typed-css-classes
PostCSS plugin that generates typed entities from CSS classes for chosen programming language.
Stars: ✭ 12 (-98.15%)
Mutual labels:  postcss, tailwindcss
tailwind-airbnb
A demo of how to build Airbnb's home page using Tailwind CSS
Stars: ✭ 39 (-93.99%)
Mutual labels:  postcss, tailwindcss
tailpress
A Tailwind CSS enabled Underscores theme
Stars: ✭ 60 (-90.76%)
Mutual labels:  postcss, tailwindcss
vite-ts-tailwind-starter
Opinionated Vite + Vue 3 + TypeScript + Tailwind CSS starter template w/ tests and CI.
Stars: ✭ 228 (-64.87%)
Mutual labels:  postcss, tailwindcss
Windmill Dashboard React
❄ A multi theme, completely accessible, ready for production dashboard.
Stars: ✭ 283 (-56.39%)
Mutual labels:  dark-theme, tailwindcss
tailwindcss-postcss-browsersync-boilerplate
Tailwind CSS + PostCSS + BrowserSync boilerplate
Stars: ✭ 28 (-95.69%)
Mutual labels:  postcss, tailwindcss
gridsome-starter-liebling
Gridsome starter based on the Liebling theme for Ghost. Content is added via markdown, while Tailwind CSS is used for the layout/styling.
Stars: ✭ 21 (-96.76%)
Mutual labels:  dark-theme, tailwindcss
stencil-tailwind-plugin
Plugin for using tailwindcss with StencilJS
Stars: ✭ 17 (-97.38%)
Mutual labels:  postcss, tailwindcss
eleventy solo starter njk
Further development suspended as of 2021-09-11. Please refer instead to https://www.11ty.dev/docs/starter/ for a wide selection of other Eleventy starter sets.
Stars: ✭ 22 (-96.61%)
Mutual labels:  postcss, tailwindcss
tailwind-caret-color
Tailwindcss plugin to color caret in input fields
Stars: ✭ 12 (-98.15%)
Mutual labels:  postcss, tailwindcss
laravel-micro-spa-boilerplate
An "Advanced" SPA Boilerplate featuring a dark themed UI that's integrated with LaravelMicro.js, Vue.js, TailwindCSS & Laravel PHP Framework.
Stars: ✭ 23 (-96.46%)
Mutual labels:  dark-theme, tailwindcss
XT-TailwindCSS-Starter
A Tailwind CSS Starter. Based on Tailwind CSS, Webpack, PostCSS, and cssnano. Fully optimized for top performance.
Stars: ✭ 19 (-97.07%)
Mutual labels:  postcss, tailwindcss
Shopify Theme Lab
Shopify theme development environment using Liquid, Vue and Tailwind CSS 🧪
Stars: ✭ 250 (-61.48%)
Mutual labels:  tailwindcss, postcss

Tailwind CSS Dark Mode

Installation

npm install tailwindcss-dark-mode --save-dev

Add the plugin to the plugins array in your Tailwind configuration.

plugins: [
  require('tailwindcss-dark-mode')()
]

Usage

Styles generated by this plugin are only used if the selector is applied to the <html> element. How you do that is up to you. prefers-dark.js is provided as an option, which is a simple script that enables dark mode based on the user's system theme.

Available Variants

Variants for dark mode are based on Tailwind's own variants...

  • dark
  • dark-hover
  • dark-focus
  • dark-active
  • dark-disabled
  • dark-group-hover
  • dark-focus-within
  • dark-even
  • dark-odd
  • dark-placeholder

... and are used in the same way.

<div class="bg-white dark:bg-black">
  <p class="text-black dark:text-white">
    My eyes are grateful.

    <a ... class="text-blue-300 hover:text-blue-400 dark:text-blue-700 dark-hover:text-blue-600">
      Learn more
    </a>
  </p>
</div>

Enabling Variants

As with existing variants such as hover and focus, variants for dark mode must be enabled in your Tailwind configuration for any utilities that need them.

variants: {
  backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
  borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],
  textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder']
}

Please note: This is only a simple demonstration for how dark variants are enabled and how they could be used. The variants provided by this plugin are not replacements for Tailwind's own variants, they are to be used in addition to them. For example, anywhere you would enable dark-hover, you should also enable hover.

Changing the Selector

By default, .mode-dark is used as the selector for dark mode. You can change this by adding the darkSelector key to the theme section in your Tailwind configuration.

  theme: {
    darkSelector: '.mode-dark'
  }

Don't forget to also change the selector in prefers-dark.js if you are using it.

PurgeCSS

If you are using PurgeCSS, you should either add the selector to the whitelist array...

whitelist: ['mode-dark']

... or add prefers-dark.js to the content array.

content: [
  '**/*.js',
  './node_modules/tailwindcss-dark-mode/prefers-dark.js',
  './or/your/own/prefers-dark.js'
]

Otherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the selector is only applied when the page is loaded.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].