https://github.com/avdgaag/tailwindcss-prefers-color-scheme

A Tailwind CSS plugin for adding variants using the prefers-color-scheme media feature.
https://github.com/avdgaag/tailwindcss-prefers-color-scheme

prefers-color-scheme tailwindcss tailwindcss-plugin

Last synced: 9 days ago
JSON representation

A Tailwind CSS plugin for adding variants using the prefers-color-scheme media feature.

• Host: GitHub
• URL: https://github.com/avdgaag/tailwindcss-prefers-color-scheme
• Owner: avdgaag
• Created: 2019-07-03T18:03:21.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T03:36:31.000Z (almost 2 years ago)
• Last Synced: 2024-12-17T02:53:24.017Z (12 days ago)
• Topics: prefers-color-scheme, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Size: 835 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Tailwind CSS prefers color scheme

This plugin for [Tailwind CSS](https://tailwindcss.com) adds variants for dark and light modes using the [`prefers-color-scheme` media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).

## Installation

    npm install tailwindcss-prefers-color-scheme

## Usage

```js

// in tailwind.config.js

{

  variants: [

    backgroundColor: ['responsive', 'light-mode', 'dark-mode']

  ],

  plugins: [

    require('tailwindcss-prefers-color-scheme')()

  ]

}

```

This would generate classes like the following:

```css

.bg-red-100 {

  background-color: red;

}

@media (prefers-color-scheme: light) {

  .light-mode\:bg-red-100 {

    background-color: red;

  }

}

@media (prefers-color-scheme: dark) {

  .dark-mode\:bg-red-100 {

    background-color: red;

  }

}

```