"Exploring the versatility of Tailwind css: A guide to implementing multiple themes

I know how to customize dark and light themes in tailwind, but I'm curious about extending this functionality to include additional themes such as pink, blue, red, etc. Is there a way to achieve this with regular tailwind CSS?


<p className="text-black dark:text-white orange:text-orange blue:text-blue">Color</p>

Additionally, I am using next-themes for switching between dark and light themes. The setup requires passing different themes like so:


<ThemeProvider themes={['pink', 'red', 'blue', 'light', 'dark']}>

Although I can switch between these themes successfully, I would like tailwind to recognize the selected theme and apply the corresponding styles such as pink:text-pink.

cssnext.jsthemestailwind-css

Answer №1

It is important to customize various themes for different purposes const customConfig = require('path-to-custom-config');

// theme-1-custom.config.js module.exports = { ...customConfig, theme: { ...customConfig.theme, colors: { ...customConfig.theme.colors, // adjust colors here } } };

// theme-2-custom.config.js
...

// theme-3.custom.config.js
....

Something similar to this concept, but unsure about the exact implementation steps

Answer №2

If you're looking to easily switch between color themes, check out tw-colors

To set up colors for different themes, follow this structure

module.exports = {
      // ...your tailwind config
      plugins: [
         createThemes({
            'light': { 
               'primary': 'lime',
               'base': 'darkblue',
               'surface': 'white',
            },
            'winter': { 
               'primary': 'steelblue',
               'base': 'darkblue',
               'surface': '#F3F3F3',
            },
            'forest': { 
               'primary': 'turquoise',
               'base': 'tomato',
               'surface': '#4A4A4A',
            },
         })
      ],
   };

To change the theme in your code, simply add the corresponding class to your HTML

<html class='light'>

<html class='forest'>

And that's all there is to it!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring 'properties' to child components and selectively displaying them based on conditions

This is the code for my loginButton, which acts as a wrapper for the Button component in another file. 'use client'; import { useRouter } from 'next/navigation'; import { useTransition } from 'react'; interface LoginButtonPr ...

reactjstypescriptnext.jsreact-props

issue with animation occurs when the value changes while the setTimeout timer is still running

function wallpaperMediaPropertiesListener(event) { // reset animation test.stop(true); test.css('margin-left', 0); // set song title. test.text(event.title); var testWidth = test.outerWidth(); // clone text ...

javascripthtmljquerycss

Utilizing Next.js and React to interact with Open AI through API requests

I'm currently experimenting with the OpenAI API to develop a chatbot using React, TypeScript, and Next.js. I am facing an issue where clicking the send button in the UI does not trigger any action. Even after adding console.log statements, nothing sho ...

reactjstypescriptnext.jsopenai-api

Dynamic Bootstrap Table with Fixed Header

I am customizing a Bootstrap table by adding CSS for a sticky header. My code snippet includes the following: .table-sticky th { background: #fff; position: sticky; top: -1px; z-index: 990; } <div class ...

htmlcsstwitter-bootstrapbootstrap-4

Ensuring the input element is correctly aligned in its position

How can I center the input element inside its parent without any top margin? What CSS changes do I need to make? #menu { height:30px; background: #ccc; } #board-name { display:block; margin-left:auto; margin-right:auto; height: 80%; vertical-al ...

htmlcssinputposition

Adding a scroll bar to a fixed container: tips and tricks

I am looking to implement a scrollbar in a fixed container for the cart products. The goal is to enable easy navigation through a large number of products added to the cart by scrolling within the container. Below is the HTML code snippet representing the ...

phphtmlcss

What are some ways to create a one-sided design without being limited by container constraints

How can I create a block on my site where there are no container restrictions on the right, but they are limited on the left? The goal is to have an image pressed against the right edge of the page while keeping the container limits on the left. Here is my ...

htmlcss

The image appears fuzzy until you hover over it and it transforms into a larger size

Encountering a strange issue with using the zoom property on an image during hover state. The image seems to be blurry before and after the scale transition, but surprisingly sharp during the actual transition. Any tips on how to prevent this blurriness in ...

htmlcsscss-transforms

access various paths to distinct iframes

<?php // Specify the directory path, can be either absolute or relative $dirPath = "C:/xampp/htdocs/statistics/pdf/"; // Open the specified directory and check if it's opened successfully if ($handle = opendir($dirPath)) { // Keep readin ...

javascriptphphtmlcssiframe

Maintain the link's functionality even after it's been clicked by utilizing the same

I have a fixed navbar with same-page anchors and I want to keep the link active after it has been clicked and taken to that section of the page. While this is simple for links to another page, I'm struggling to figure out how to do it here. Here&apos ...

javascriptjqueryhtmlcssnavbar

The issue of the drop-down menu not appearing persists when using HTML and CSS

ul#menu li ,ul.sub-menu li { list-style-type: none; float:left; } ul#menu li a ,ul.sub-menu li a { display: inline-block; width: 150px; height: 40px; text-decoration: none; line-height: 40px; text-align: center; color:rgb(235, 139, 13) ...

htmlcss

What is the best way to ensure my background image adjusts properly for both iPhones and Android devices to be responsive?

I have set the background image in my CSS to fit perfectly without any need for adjustments. The goal is for the image to resize itself when viewed on mobile devices or tablets. .intro { display: table; width: 100%; height: auto; padding: ...

htmlcssiphoneresponsive-design

Flex: 1 does not completely fill the Angular layout div in vertical dimensions

I am currently developing a sidebar using Angular and Flex. The app-sidebar is nested within the Angular component layout shown below: <div fxlayout="row" fxFill> <app-sidebar fxLayout="column" fxFlex="10%"></app-sidebar> <div ...

htmlcssangularflexbox

What is the best way to implement a search feature in my Next.js application that integrates with Supabase?

Hey there! I have a database filled with people's information and I really need to add a search feature to my web app so users can easily find what they're looking for. I attempted to implement the Full Text Search functionality, as outlined in ...

next.jssupabase

Place the application bar at the bottom of the screen

I am working on a project aimed at monitoring employees, and I have developed a user interface that allows for modifications within the site. However, there is an issue with the "bottom App Bar" section at the bottom of this interface which has a blue back ...

cssmaterial-ui

Removing outlines on <p> <a> or <div> elements with Ionic and Angular seems to be a challenging task

Hey there, I’m currently working on my application which includes a login page. I've implemented a “Forgotten password ?” link, but no matter what I try, like using .class and :focus {outline: none}, I still see a yellow square around the item. ...

htmlcssangularionic-framework

Tips for customizing the CSS styling of the validation ng-class error

Seeking advice: Is there a way to customize the CSS style of the 'error' validation error for ng-class in Bootstrap v3? This is my current code: ng-class="(form.datos.$invalid) && ( form.datos.$touched || submitted) ? 'error&apos ...

cssangularjs

Booking form pop-up appearing beneath the section

Currently, I am in the process of adding a booking form to the main page of . However, I seem to be encountering an issue where a popup appears below the section it is supposed to open within when selecting the number of persons. Despite adjusting the z ...

htmlcsswordpressdivi

Webpack Encore: SCSS import order causing unexpected issues

When developing with Symfony + Webpack Encore, I aim to split styles into "layout" and "page-based" categories for convenience. However, despite this organization, I still prefer to compile all styles into a single CSS file. To achieve this, I structure my ...

csswebpacksass

Employing the react Modal feature to create a versatile pop-up window that can be activated from numerous pages within

I have a Modal that is activated by various buttons spread across different components. I've managed to make it functional on the pages by passing variables in the Layout as shown below: const index = () => { const [show, setShow] = useS ...

reactjsreact-hooksnext.js