https://github.com/angelhtml/tailwind_colormode
dark mode for tailwind
https://github.com/angelhtml/tailwind_colormode
Last synced: about 2 months ago
JSON representation
dark mode for tailwind
- Host: GitHub
- URL: https://github.com/angelhtml/tailwind_colormode
- Owner: angelhtml
- Created: 2024-07-27T18:51:02.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-27T18:56:03.000Z (almost 2 years ago)
- Last Synced: 2025-11-27T20:33:23.273Z (7 months ago)
- Language: JavaScript
- Size: 4.01 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
#dark mode
##tailwind.config.js
+ darkMode:"class",
```Javascript
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}"
],
darkMode:"class",
theme: {
extend: {},
},
plugins: [],
}
```
## inside a component
```Javascript
let [mode, setMode] = useState(false)
useEffect(()=> {
if(mode){
document.documentElement.classList.add("dark")
}else{
document.documentElement.classList.remove("dark")
}
console.log(mode)
},[mode])
setMode(!mode)} className="text-silver font-medium text-2xl border-2 rounded-md border-silver hover:text-black hover:border-black">{mode ? : }
```