Need a video how to use this :c

[IRediTOTO]

hello, thank you for made this. But I can't understand how to config it right? If have time, can you please make a video how to use it? :(
Thank you.

[innocenzi]

Hi, I'm sorry but I won't be able to do that, as I am unable to properly vocally speak english.

However I am willing to help you there if you share details on what you tried and what didn't work.

[IRediTOTO]

I trying make dark mode :D
I did by manual

It work ok :) But I like to use yours, I tried but so hard to setup with me :|

[innocenzi]

So, you will need another file. This file will contain the configuration for this plugin, so your themes.

1. Create a theme.config.js at the root of your project.

2. Open it and add this line, which will import what is necessary to build your theme:

// theme.config.js
const { ThemeBuilder, Theme } = require('tailwindcss-theming');

3. Then declare a new theme. In this case we'll do the light one:

// theme.config.js
const { ThemeBuilder, Theme } = require('tailwindcss-theming');

const lightTheme = new Theme()
  .name('light')
  .default()
  .assignable()
  .colors({
    'background':'#313131',
    'surface':'#212121',
    'on-background':'#ffffff',
    'on-surface':'#ffffff',
  })
;

With this theme, you'll have four color utilities, so you'll be able to use, for instance, .bg-background for your backgrounds, and .text-on-background for the text colorson your background.

4. We are not done yet, we need a dark theme. Just add one:

// theme.config.js
const { ThemeBuilder, Theme } = require('tailwindcss-theming');

const lightTheme = new Theme()
// ...

const darkTheme = new Theme()
  .name('dark')
  .colors({
    'background':'#ffffff',
    'surface':'#1c1c1c1',
    'on-background':'#111111',
    'on-surface':'#313131',
  })
;

5. Now you have two variables, darkTheme and lightTheme, that contain your themes. You need to export an object which contain these two themes. You do that with the ThemeBuilder:

// theme.config.js
const { ThemeBuilder, Theme } = require('tailwindcss-theming');

const lightTheme = new Theme()
// ...

const darkTheme = new Theme()
// ...

module.exports = new ThemeBuilder()
  .asDataThemeAttribute()
  .default(lightTheme)
  .dark(darkTheme);

6. Last step, go back in your Tailwind config, and import this file as a plugin:

module.exports = {
  theme: {},
  variants: {},
  plugins: [
    require('./theme.config.js')
  ],
};

And you're done. Use attribute data-theme="dark" to apply the dark theme, or setup your browser to use the darktheme since it's enabled with the prefers-color-scheme media query.

https://github.com/hawezo/tailwindcss-theming/blob/master/docs/setup.md