<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> <svg class="h-6 w-6" ...
<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 font-medium"> 关于 </a> </div> </div> </div> <!-- 深色模式切换按钮 --> <button id="theme-toggle" class="rounded-lg p-2.5 text-gray-500 hover:...
function toggleDarkMode(e) { e.preventDefault(); document.documentElement.classList.toggle('dark'); } </script> </body> </html> 这个示例展示了如何在一个简单的HTML页面中使用Tailwind CSS来实现深色模式的切换。通过在body和其他元素上使用带前缀的类(如dark:bg-gray-100),Tailwind CSS可以在深色模式激...
0x01 概述 (1)简介 Tailwind CSS 官网:https://www.tailwindcss.cn/ Tailwind CSS 是一个 CSS 框架,使用初级“工具”类创建布局 如 Bootstrap 等传统 CSS 框架,其使用的类通常与组件直接相关;然而,Tailwind 则采用了
Adding dark mode to tailwindcss with simple javascript and toggle button. Here is the demo CSS 0 0 0 0 Updated Nov 27, 2023 TailwindCSS-Simple-HTML Public Add tailwindcss in simple HTML project. CSS 0 0 0 0 Updated Oct 12, 2022 Custom-Fonts-TailwindCSS Public This repository ...
import'./tailwind.css'; 第三步:创建暗黑模式切换开关 现在,我们将创建暗黑模式的开关。在你的App.js文件中: 代码语言:javascript 复制 import{useState}from'react';functionApp(){const[darkMode,setDarkMode]=useState(false);consttoggleDarkMode=()=>{setDarkMode(!darkMode);};return(<div className={dar...
RTL Toggle dark/light mode HTML Copy <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focu...
现在,当用户点击“切换主题”按钮时,网站会根据当前主题在“dark”类之间切换,实现主题切换功能。 总结:通过使用TailwindCSS,我们可以在项目中轻松实现主题切换功能。只需进行简单的安装和配置,即可快速为网站或应用添加个性化主题。希望本篇文章能对您有所帮助!
在项目根目录下创建一个tailwind.config.js文件,用于配置 Tailwind CSS: // tailwind.config.jsmodule.exports= { mode:'jit', purge: ['./src/**/*.{vue,js,ts,jsx,tsx}','./public/index.html'], darkMode:false,// or 'media' or 'class'theme: { ...
Toggle mobile view Toggle RTL mode Toggle dark mode Copy to clipboard <divclass="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"><buttonaria-current="true"type="button"class="w-full px-4 py-2...