Open Sidebar

Tailwind CSS Themes

A Tailwind CSS theme defines the color palette, typography, spacing, and design tokens that give your project its unique look and feel. Instead of writing custom CSS for each page, you centralize your design settings in tailwind.config.js.

How to Configure a Tailwind CSS Theme

You can define and extend your theme in the tailwind.config.js file.


// tailwind.config.js 
module.exports = { 
 theme: { 
   extend: { 
     colors: { 
       primary: '#2fc6f8',
       secondary: '#a835fa', 
       success: '#02ce57',
       danger: '#f51d2f',
       warning: '#fabf2b', 
      }, 
    }, 
  }, 
}

Enable Nira UI built-in theme

To enable a theme, simply add the data-theme attribute to your HTML element

<html data-theme="midnight"></html>

This applies the midnight theme globally to your page. You can switch themes anytime just change the value of data-theme.

Create Your Own Tailwind CSS Theme

Nira UI themes are fully customizable. To create your own theme, define your custom variables and apply them with a data-theme name:


[data-theme="mytheme"] {
--color-primary: oklch(72.895% 0.13049 86.648);
--color-secondary: #2E004F;
--color-accent: #E8C66A;
--color-success: #3AA76D;
--color-danger: #B3261E;
--color-warning: #F6C851;
--color-base-content: oklch(21% 0.13049 86.648);
--color-base-content-100: oklch(30% 0.13049 86.648);
--color-base-content-200: oklch(39% 0.13049 86.648);
--color-base-content-300: oklch(48% 0.13049 86.648);
--color-base-100: oklch(100% 0.13049 86.648);
--color-base-200: oklch(95% 0.13049 86.648);
--color-base-300: oklch(83% 0.13049 86.648);
--color-base-400: oklch(80% 0.13049 86.648);
}

Then use it in your HTML:

<html data-theme="mytheme"></html>

Or on any Nira UI Components

My Theme

Calm, focused, and easy on the eyes. Great for dashboards and coding tools.



  My Theme
Calm, focused, and easy on the eyes. Great for dashboards and coding tools.

List of themes

Here are the available built-in themes that comes with Nira UI

Try them:

🌞

Light

🌙

Dark

🌌

Midnight

🛡️

Steel

⛈️

Storm

🌅

Sunset

🌹

Rose

🥇

Gold

🏢

Corporate

📼

Retro

🎧

Lofi

🧸

Pastel

🧛

Dracula

Nira UI Tailwind CSS Components

Buttons

Link Button

Cards

Card title

With supporting text below as a natural lead-in to additional content.

Card link

Badges

Default Badge Badge Badge Badge Badge Badge Badge Badge Badge

Form Elements

Input fields and interactive controls

Email Input

Password Input

Volume

Avatars

User profile images

Alerts

Notification messages

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

View all Nira UI Components

🎨 Try Nira UI Themes in Your Project

Step 1: Install Nira UI:

npm i nira-ui

Add it as a Tailwind CSS plugin

@import "tailwindcss";
@plugin "nira-ui/plugin.js";

Step 3: Set your theme in HTML:

 <html data-theme="sunset"></html>

Now your entire project adapts instantly to the selected theme!