How to create a custom variant in tailwindcss?

Question

I make dark variant following tailwindcss docs, but that doesn't work and in this doc unfortunately, no exact explanation has been given!!

How can I make a variant like this:

<p class="dark:text-white text-gray-700"></p>

Can anybody help me, please?

Answer 1

Now whenever dark mode is enabled on the user’s operating system, dark:{class} classes will take precedence over unprefixed classes.

The dark mode is only available if your operating system enables it.

Also, maybe you didn't add the dark settings in your tailwind.config.js

// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}

If you want to support toggling dark mode manually instead of relying on the operating system preference change the media setting for class

Answer 2

<p style="color='color'" ></p> 

write color name of 'color'