DEV Community: vrauuss softwares

How to Create Custom Themes in Tailwind CSS v4

vrauuss softwares — Sun, 24 Aug 2025 13:44:57 +0000

Themes define the visual style and layout of a website, making the user experience more enjoyable. In this article, I'll show you how to create different themes using Tailwind CSS.

Note: I used AI tools to help draft and structure this article because I’m still building my technical writing skills. However, all the code was written, tested, and reviewed by me.

1. Add custom variants with `@custom-variant`

You can create new themes or conditional styles through custom variants added by the @custom-variant directive. But first, here are some important points to consider:

Define in index.css: Add @custom-variant declarations to your main CSS file (e.g., index.css).
Enable dark mode: Create a dark variant and activate it using the data-theme attribute.
Maintain consistent naming: Use a short name like dark for dark mode, and prefix other themes with theme-.

Method 1: Nesting syntax

This method allows nesting additional rules within the block:

@custom-variant dark {
    &:where([data-theme="dark"] *) {
        @slot;
    }
}

@custom-variant theme-midnight {
    &:where([data-theme="midnight"] *) {
        @slot;
    }
}

Example applying styles only on devices that support hover:

@custom-variant any-hover {
    @media (any-hover: hover) {
        &:hover {
            @slot;
        }
    }
}

Note: This rule only applies to devices that support hover (e.g., desktops or laptops), and not to touch-only devices like phones or tablets.

Method 2: Shortcut syntax

This syntax is useful when you don't need to nest other rules:

@custom-variant dark (&:where([data-theme="dark"] *));
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

2. Apply theme-specific styles in markup

Once data-theme is set, you can apply conditional styles using your custom variant prefix in your utility classes:

<body class="bg-white theme-dark:bg-black-800 theme-midnight:bg-purple-800">

3. Set themes via `data-theme` attribute

To activate a theme, set the data-theme attribute on the <html> tag:

<html data-theme="midnight" lang="en">

You can dynamically change the value to switch themes:

<html data-theme="light" lang="en"> <!-- No need to add custom variant -->
<html data-theme="dark" lang="en">
<html data-theme="midnight" lang="en">

4. Bonus: Component to switch between themes dynamically

This example uses a <select> element and updates the data-theme attribute on <html> to control the active theme.

import React, { useState, useEffect } from "react";
import capitalize from "./utils/capitalize"; // Helper to capitalize names

// Available themes
const themes = [
  { name: "light", icon: "☀️" },
  { name: "dark", icon: "🌑" },
  { name: "midnight", icon: "🌌" },
];

function App() {
  // State for the current theme index
  const [idx, setIdx] = useState(0);
  const theme = themes[idx];

  // Update data-theme when theme changes
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme.name);
  }, [theme]);

  // Update index state based on the selected theme
  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setIdx(themes.findIndex((t) => t.name === e.target.value));
  };

  return (
    <div className="space-y-2 text-center">
      <label htmlFor="theme-select" className="block font-medium">
        Choose a theme:
      </label>

      <select
        id="theme-select"
        value={theme.name}
        onChange={handleChange}
        className="rounded border px-3 py-1"
      >
        {themes.map((theme) => (
          <option key={theme.name} value={theme.name}>
            {theme.icon} {capitalize(theme.name)}
          </option>
        ))}
      </select>
    </div>
  );
}

export default App;

Note: Soon, I’ll create a customizable and more complete <SwitchTheme> component.

Contact & Links

Contact

YouTube: @vrauuss-softwares
GitHub: vrauuss-softwares

Blog

Coming soon...

Articles

YouTube: Coming soon...
DEV.to: Coming soon...

References

Tailwind CSS: Adding custom variants
MDN: Customizable select elements

How to Disable SVG Preview Mode

vrauuss softwares — Sun, 01 Jun 2025 05:43:09 +0000

3 ways to open SVG files as text instead of preview mode in Visual Studio Code.

Method 1: Set editor via `context menu`

Locate any .svg file
Right-click it and select Open With...
Select Configure default editor for '*.svg'...
Set **Text Editor" as the default

Method 2: Set editor via `settings.json`

Open Manage menu from the gear icon (⚙️)
Go to Settings
Open settings.json from the file icon (📃)
Add the following snippet:

"workbench.editorAssociations": {
  "*.svg": "default"
}

Method 3: Set editor via `GUI`

Open Manage from the gear icon (⚙️)
Go to Settings
Search for Workbench.EditorAssociation
Click Add Item
Enter *.svg in the Item field
Enter default in the Value field
Click OK to apply

Contact & Links

Contact

YouTube: @vrauuss-softwares
GitHub: vrauuss-softwares

Blog

Coming soon...

Articles

YouTube: How to Disable SVG Preview Mode
DEV.to: How to Disable SVG Preview Mode

References

GitHub: SVG files open as Preview
Stack Overflow: Unable to import SVG with Vite as React Component

How to Import SVGs as React Components (Using Vite + TypeScript)

vrauuss softwares — Thu, 29 May 2025 03:36:23 +0000

How to use SVGs as React Components using Vite and TypeScript in your application.

1. Install vite-plugin-svgr

This plugin transforms SVG files into React components. Choose your package manager to install:

npm install --save-dev vite-plugin-svgr

yarn add -D vite-plugin-svgr

pnpm add -D vite-plugin-svgr

2. Setup `vite.config.ts`

First, import the plugin:

import svgr from "vite-plugin-svgr";

Next, add the plugin to your defineConfig:

svgr()

The finished structure should look like this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), svgr()]
});

3. Add Types to `vite-env.d.ts`

Enable TypeScript support for SVG props like className, width, and height.

/// <reference types="vite-plugin-svgr/client" />

4. Import with `?react` suffix and use SVG as Component

Import the SVG file with the ?react suffix:

import Logo from "./assets/icons/logo.svg?react";

Use the imported SVG as a React component:

<Logo className="fill-red-500 size-8" />

Contact & Links

Contact

YouTube: @vrauuss-softwares
GitHub: vrauuss-softwares

Blog

Coming soon...

Articles

YouTube: How to import SVG as React component
DEV.to: How to import SVG as React component

References

GitHub: vite-plugin-svgr
Stack Overflow: Unable to import SVG with Vite as React Component

DEV Community: vrauuss softwares

How to Create Custom Themes in Tailwind CSS v4

1. Add custom variants with @custom-variant

Method 1: Nesting syntax

Method 2: Shortcut syntax

2. Apply theme-specific styles in markup

3. Set themes via data-theme attribute

4. Bonus: Component to switch between themes dynamically

Contact & Links

Contact

Blog

Articles

References

How to Disable SVG Preview Mode

Method 1: Set editor via context menu

Method 2: Set editor via settings.json

Method 3: Set editor via GUI

Contact & Links

Contact

Blog

Articles

References

How to Import SVGs as React Components (Using Vite + TypeScript)

1. Install vite-plugin-svgr

2. Setup vite.config.ts

3. Add Types to vite-env.d.ts

4. Import with ?react suffix and use SVG as Component

Contact & Links

Contact

Blog

Articles

References

1. Add custom variants with `@custom-variant`

3. Set themes via `data-theme` attribute

Method 1: Set editor via `context menu`

Method 2: Set editor via `settings.json`

Method 3: Set editor via `GUI`

2. Setup `vite.config.ts`

3. Add Types to `vite-env.d.ts`

4. Import with `?react` suffix and use SVG as Component