@@ -16,6 +16,7 @@ Note: [react18-themes](https://github.com/react18-tools/react18-themes/) will no
1616- ✅ Fully Treeshakable (` import from nextjs-themes/client/component ` )
1717- ✅ Full TypeScript Support
1818- ✅ Unleash the full power of React 18 Server components
19+ - ✅ No flash on load (both SSR and SSG)
1920
2021> Exampand following to see more features.
2122
@@ -41,6 +42,7 @@ This project was inspired by next-themes. Unlike next-themes, `nextjs-themes` do
4142- ✅ Documented with [ Typedoc] ( https://react18-tools.github.io/nextjs-themes ) ([ Docs] ( https://react18-tools.github.io/nextjs-themes ) )
4243- ✅ Use combinations of [ data-th=""] and [ data-color-scheme=""] for dark/light variants of themes
4344- ✅ Use [ data-csp=""] to style based on colorSchemePreference.
45+ - ✅ Compatible with Tailwind CSS, StyledComponents, emotion, Material UI, ...
4446</details >
4547
4648> Check out the [ live example] ( https://nextjs-themes.vercel.app/ ) .
@@ -52,6 +54,27 @@ This project was inspired by next-themes. Unlike next-themes, `nextjs-themes` do
5254> Want Lite Version? [ ![ npm bundle size] ( https://img.shields.io/bundlephobia/minzip/nextjs-themes-lite )] ( https://www.npmjs.com/package/nextjs-themes-lite ) [ ![ Version] ( https://img.shields.io/npm/v/nextjs-themes-lite.svg?colorB=green )] ( https://www.npmjs.com/package/nextjs-themes-lite ) [ ![ Downloads] ( https://img.jsdelivr.com/img.shields.io/npm/d18m/nextjs-themes-lite.svg )] ( https://www.npmjs.com/package/nextjs-themes-lite )
5355> In case you are using ` r18gs ` in your project, you may use lite version which requires ` r18gs ` as a peerDependency.
5456
57+ ### With Tailwind
58+
59+ In ` tailwind.config.js ` , set the dark mode property to class:
60+
61+ ``` js
62+ // tailwind.config.js
63+ module .exports = {
64+ darkMode: " class" ,
65+ };
66+ ```
67+
68+ ⚡🎉Ready to use dark mode in Tailwind!
69+
70+ > Caution: Your class must be ` "dark" ` , which is the default value used in this library. Tailwind requires the class name ` "dark" ` for dark-theme.
71+
72+ Use dark-mode specific classes:
73+
74+ ``` tsx
75+ <h1 className = " text-black dark:text-white" >
76+ ```
77+
5578## Migration
5679
5780> Refer to the [migration guide](./guides/migration.md).
0 commit comments