DEV Community

Cover image for How to Implement Dark Mode in Tailwind CSS in One Command
Md Sana ullah
Md Sana ullah

Posted on

1

How to Implement Dark Mode in Tailwind CSS in One Command

Step 1: Run the Setup Command
Open your terminal and run the following command to create a complete Tailwind project with dark mode functionality:

mkdir dark-mode-tailwind && cd dark-mode-tailwind && npm init -y && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init && echo '@tailwind base;\n@tailwind components;\n@tailwind utilities;' > styles.css && echo '<!DOCTYPE html>\n<html lang="en" class="dark">\n<head>\n<meta charset="UTF-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />\n<title>Dark Mode with Tailwind CSS</title>\n<link rel="stylesheet" href="dist/styles.css" />\n</head>\n<body class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200">\n<div class="min-h-screen flex flex-col items-center justify-center">\n<h1 class="text-4xl font-bold mb-4">Tailwind CSS Dark Mode</h1>\n<p class="mb-6">Toggle the button below to switch themes!</p>\n<button id="theme-toggle" class="px-4 py-2 bg-blue-500 text-white rounded shadow-md dark:bg-yellow-400 dark:text-black">Toggle Dark Mode</button>\n</div>\n<script src="script.js"></script>\n</body>\n</html>' > index.html && echo 'const themeToggleBtn = document.getElementById("theme-toggle");\nconst htmlElement = document.documentElement;\n\nif (localStorage.getItem("theme") === "dark") {\nhtmlElement.classList.add("dark");\n}\n\nthemeToggleBtn.addEventListener("click", () => {\nif (htmlElement.classList.contains("dark")) {\nhtmlElement.classList.remove("dark");\nlocalStorage.setItem("theme", "light");\n} else {\nhtmlElement.classList.add("dark");\nlocalStorage.setItem("theme", "dark");\n}\n});' > script.js && npm run build && npx tailwindcss -i ./styles.css -o ./dist/styles.css --watch
Enter fullscreen mode Exit fullscreen mode

Step 2: Open the Project
After the command completes, open the folder in your code editor. Your files are ready, and you can test the project in any live server, such as:

npx live-server
Enter fullscreen mode Exit fullscreen mode

What the Command Does
Creates a project folder (dark-mode-tailwind) and navigates into it.
Initializes the project with npm and installs Tailwind CSS dependencies.
Configures Tailwind CSS and creates the required styles.css file.
Adds a basic index.html with a dark mode toggle button.
Writes a script.js file to handle dark mode logic using localStorage.
Builds the Tailwind CSS file for immediate use.
Test the Dark Mode
Open index.html in a browser.
Click the "Toggle Dark Mode" button to switch themes.
Your preference will persist even after refreshing, thanks to localStorage!
Enjoy coding! 😊

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay