**Quick answer:** add the `dark:` variant to any [Tailwind](/courses/tailwindcss) utility, for example `bg-white dark:bg-zinc-900`. By default `dark:` follows the visitor's operating-system setting (`prefers-color-scheme`). To switch dark mode manually with a class: - **[Tailwind](/courses/tailwindcss) v4:** add `@custom-variant dark (&:where(.dark, .dark *));` to your [CSS](/courses/css), then put the `dark` class on the `` element. - - **Tailwind v3:** set `darkMode: "class"` in `tailwind.config.js`, then put the `dark` class on the `` element. - - ## Dark Mode in Tailwind CSS Dark mode is basically your website saying: > "Okay, your eyes have suffered enough today." 🌙 Tailwind CSS makes it easy to create different styles for light and dark themes using the `dark:` variant. For example: ```html

Hello Tailwind

``` Here: ```text bg-white → white background in light mode dark:bg-slate-900 → dark background when dark mode is active ``` The same pattern works with text, borders, shadows, hover states, and most other utilities. --- ## Styling Text for Dark Mode Changing only the background isn't enough. Imagine this: ```html

Hello

``` Dark background. Black text. Your paragraph has officially disappeared into the void. 💀 Instead, update both: ```html

Hello

``` Now you get: ```text Light Mode → white background → dark text Dark Mode → dark background → white text ``` Much better. --- ## The `dark:` Modifier The syntax is simple: ```text dark:utility ``` For example: ```html

``` You can use it for text: ```html

``` Borders: ```html

``` Hover states: ```html ``` You could toggle the class with [JavaScript](/courses/javascript): ```javascript const button = document.querySelector('#theme-toggle'); button.addEventListener('click', () => { document.documentElement.classList.toggle('dark'); }); ``` When clicked: ```text ``` becomes: ```text ``` Click again and the class disappears. Your `dark:` utilities automatically [react](/courses/reactjs) to that change. --- ## Dark Mode Card Example Let's build a card that works nicely in both themes. ```html

Writes Upside-Down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

``` Look at the background: ```text bg-white dark:bg-slate-800 ``` The heading: ```text text-slate-900 dark:text-white ``` And the paragraph: ```text text-slate-500 dark:text-slate-400 ``` Each element defines both versions right where it's styled. That's one of the nicest things about Tailwind dark mode. You don't need some giant separate `.dark-theme.css` file hiding in the basement. --- ## Customizing Tailwind's Theme Tailwind gives you a solid default design system, but you're definitely not stuck with it. You can create your own: * colors * fonts * breakpoints * spacing values * shadows * animations * design tokens In modern Tailwind CSS, customization is primarily done directly in CSS using the `@theme` directive. --- ## Creating a Custom Brand Color Suppose your project has its own brand color. You can define it like this: ```css @import "tailwindcss"; @theme { --color-brand-light: #3fbaeb; --color-brand: #0fa9e6; --color-brand-dark: #0c87b8; } ``` Tailwind can now generate utilities based on those values. For example: ```html ``` Or: ```html

Hello Brand

``` Your custom design token now behaves like a normal Tailwind color. Pretty neat. --- ## Creating a Custom Font You can also define your own font family. ```css @theme { --font-brand: "Inter", sans-serif; } ``` Then use it like: ```html ``` You can create multiple font families too: ```css @theme { --font-heading: "Poppins", sans-serif; --font-body: "Inter", sans-serif; } ``` And use them: ```html

Big Heading

Comfortable readable content.

``` Your project's typography system stays consistent without repeating custom CSS everywhere. --- ## Creating Custom Breakpoints Tailwind's default responsive breakpoints work well for most projects. But sometimes your design needs something different. You can create your own breakpoint using theme variables: ```css @theme { --breakpoint-xs: 30rem; --breakpoint-3xl: 120rem; } ``` Now you can use them like normal responsive modifiers: ```html

Content

``` Your custom breakpoint becomes part of Tailwind's utility system. --- ## Bringing Everything Together Your CSS could look like this: ```css @import "tailwindcss"; @custom-variant dark (&:where(.dark, .dark *)); @theme { --color-brand-light: #3fbaeb; --color-brand: #0fa9e6; --color-brand-dark: #0c87b8; --font-brand: "Inter", sans-serif; --breakpoint-xs: 30rem; } ``` Now your markup can use those custom values: ```html

Welcome

Your custom Tailwind theme is working.

``` Now you're no longer just using Tailwind's design system. You're building your own design system **with Tailwind**. --- ## Extending vs Replacing Defaults Most of the time, you'll want to add your own values while keeping Tailwind's useful defaults. For example: ```css @theme { --color-brand: #0fa9e6; } ``` This adds your brand color while Tailwind's existing colors remain available. So you can still use: ```text bg-blue-500 text-slate-700 border-red-300 ``` alongside: ```text bg-brand text-brand ``` You can also deliberately replace or remove parts of Tailwind's default theme when building a tightly controlled design system. But for most beginner projects: > Add what you need. Keep the useful defaults. No need to delete the whole kitchen because you bought a new spoon. 😄 --- ## What About `tailwind.config.js`? If you've watched older Tailwind tutorials, you may see configuration like: ```javascript // tailwind.config.js module.exports = { theme: { extend: { colors: { brand: '#0fa9e6' } } } } ``` That approach is common in **Tailwind CSS v3 projects**. Modern Tailwind CSS v4 moved toward **CSS-first configuration**, so new projects commonly use `@theme` directly inside CSS instead. That's important when following tutorials online because Tailwind has evolved quite a bit. Always check which Tailwind version the tutorial is using before copying configuration code and wondering why your computer has personally betrayed you. 😭 --- ## Key Takeaway Dark mode in Tailwind mainly revolves around: ```text dark: ``` For example: ```html

``` You can follow the user's system preference or configure the `dark:` variant for a manual theme toggle. For customization, modern Tailwind lets you define design tokens with: ```css @theme { /* custom design tokens */ } ``` You can customize colors, fonts, breakpoints, and much more while continuing to use Tailwind's utility-first workflow. Once you understand dark mode and theme customization, Tailwind stops feeling like a collection of utility classes and starts becoming something much more powerful: **a design system you control**. Throughout **asif.to**, we'll keep customization practical — building themes, reusable brand styles, and dark-mode interfaces the same way you'd actually use them in modern production projects. ```html // Dark Mode Card

Writes Upside-Down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

``` ```javascript // tailwind.config.js Example /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,js}'], darkMode: 'class', // Enable manual dark mode toggle theme: { extend: { colors: { brand: { light: '#3fbaeb', DEFAULT: '#0fa9e6', dark: '#0c87b8', } }, fontFamily: { sans: ['Inter', 'sans-serif'], } } } } ```

Welcome Back

Writes Upside-Down

Hello Brand

Big Heading

Welcome

Writes Upside-Down