ElianCodes

← Back to blog

Published on 02/09/2021 18:11 by Elian Van Cutsem

Add dark mode to your site with TailwindCSS

I’ve fiddled arround with TailwindCSS for some time now, but never got to the point of adding dark mode. But actually it isn’t that hard since v2.0.

Official dark mode documentation

TailwindCSS docs has it’s very own dedicated documentation on dark mode. So I used it as a guide to setup my application’s dark mode.

Tailwind config

Tailwind disables dark mode in a basic setup to reduce the size of the css-file. To enable it you just have to add darkMode: 'media' or darkMode: 'class' in your tailwind.config.js. In the minimal config it would look like this:

module.exports = {
  purge: [],
  darkMode: "class", // or 'media'
  theme: {},
  variants: {},
  plugins: [],
};

‘media’ vs ‘class’

Dark mode in tailwind is very easy with media. It will take the prefers-color-scheme of your OS to determine if you’re using dark or light mode. Dark mode class will use a manual toggle to determine dark or light mode. With class you can add the class to your html element. You can simply toggle this with JavaScript.

How to use dark mode in css

It’s as simple as just adding dark:bg-black to your html classes.

<body class="bg-white dark:bg-black">
  <h1 class="text-black dark:text-white">What color am I?</h1>
</body>

Tailwind will then automagically determine what classes to use.

Above is ofcourse an easy example, but dark: can also be stacked to other variants like lg: or hover:. So in the example below, the text will be black on smaller screens but white on larger screens.

<h1 class="text-black dark:lg:text-white">What color am I?</h1>

Variants

By default Tailwind dark classes are available on background colors, border colors, text colors and a few more. But you can extend tailwind to your needs by configuring tailwind.config.js

module.exports = {
  // ...
  variants: {
    extend: {
      textOpacity: ["dark"],
    },
  },
};

Conclusion

TailwindCSS dark mode is very easy when combined with @apply classes and can be extended to your needs. It’s easy to configure and can give an extra functionality to your application.

See an example here or here.

Written by Elian Van Cutsem

← Back to blog

Recent Blogposts

  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.