Tailwind Dark Mode is so cool! We’re building a dark mode toggle today.
What We Are Building
We’re making a dark mode toggle. It’s useful for reading at night.
HTML Structure
We start with HTML. It’s the base of our toggle.
Don’t worry about this part. Just copy the code.
index.html
<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Tailwind Dark Mode Setup</title><link rel='stylesheet' href='styles.css'></head><body><div class='container'><div class='banner'><h1>Tailwind Dark Mode Setup</h1></div><div class='card'><div class='card-content'><h2>Welcome to Tailwind Dark Mode</h2><p>This is a sample card with dark mode setup using Tailwind CSS utility classes.</p></div></div></div></body></html>CSS Styling
CSS makes our toggle look nice. We use Tailwind classes.
Here’s the cool part: we use utility classes.
styles.css
body { background-color: #0f172a; overflow: hidden; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; box-sizing: border-box; } .container { max-width: 100%; box-sizing: border-box; } .banner { background: linear-gradient(90deg, #ff69b4, #ffe66d); padding: 1rem; text-align: center; color: #0f172a; border-radius: 0.5rem; margin-bottom: 2rem; } .card { background: rgba(15, 23, 42, 0.5); padding: 2rem; border-radius: 1rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .card-content { color: #fff; }JavaScript
JavaScript makes our toggle work. It’s like magic.
Let me explain what’s happening here. We add an event listener.
How It All Works Together
Step 1: HTML Setup
We set up our HTML. It’s easy.
Step 2: CSS Styling
We add our CSS. It’s cool.
Step 3: JavaScript
We add our JavaScript. It’s like magic.
Pro tip: keep your code clean.
Tips to Customise It
We can customize our toggle. It’s fun.
We can change the colors. We can add animations.
Check out MDN for more info.
Conclusion
We did it! We built a dark mode toggle.
Share your project with friends. Be proud.
Remember: practice makes perfect.
Also, check out CSS-Tricks for more tutorials.
If you want to learn more about Tailwind, check out Tailwind Image Slider or Tailwind CSS Slider.
