<a href="#" class="text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium"> 首页 </a> <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm ...
1.根元素会挂载一个 dark-mode 的样式。2.任何设置了 dark:{class} 的样式会生效。没错,这就是 tailwindcss 内置的 dark mode,根据模式切换,能自动往根元素插入一个class,并且让 我们一开始设置的生效 ,大概的原理我们懂了,就差实践了,那么在进入实践之前,先来聊聊,为什么会有暗黑模式?当前以下不仅会...
在Tailwind CSS中切换主题,可以通过配置和使用CSS变量(CSS Variables)或者通过Tailwind的darkMode特性来实现。下面将详细介绍这两种方法。 方法一:使用CSS变量 定义CSS变量: 在CSS文件中定义多个主题的颜色变量。例如,可以创建两个主题文件:light-theme.css和dark-theme.css。 css /* light-theme.css */ :root { ...
/**@type{import('tailwindcss').Config}*/module.exports={darkMode:['selector','[data-mode="dark"]'],// ...} Tailwind will automatically wrap your custom dark mode selector with the:where()pseudo-class to make sure the specificity is the same as it would be when using themediastrateg...
{document.querySelector('html').classList.remove('dark')}// Whenever the user explicitly chooses light modelocalStorage.theme='light'// Whenever the user explicitly chooses dark modelocalStorage.theme='dark'// Whenever the user explicitly chooses to respect the OS preferencelocalStorage.removeItem(...
darkMode: "class", }; </script> <style> .toggle-checkbox:checked { right: 0; border-color: #68d391; } .toggle-checkbox:checked + .toggle-label { background: #68d391; } </style> </head> <body> <div class="container mx-auto mt-10 bg-white dark:bg-slate-900 rounded-xl px-...
darkMode: 'selector', content: [ "./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}" './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory. './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,md...
exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } 使用其它文件名 要使用 tailwind.config.js 之外的文件名,请在命令行中将其做为参数传入: npx tailwindcss init tailwindcss-config.js 如果使用自...
config.js module.exports = { purge: [], darkMode: false, // or 'media' or 'class'...
// tailwind.config.js module.exports = { darkMode: 'class' };What we want to do is toggle the dark class on the <html> element. When this class appears on your tree, any child elements below it with the dark: will be applied....