Skip to content

Commit 80e6deb

Browse files
committed
update Readme
1 parent af1d53f commit 80e6deb

File tree

1 file changed

+23
-0
lines changed

1 file changed

+23
-0
lines changed

README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)