'Themes in Tailwind CSS are not working with Webpack and React

I want to switch the theme dynamically in my React project and my react app is build and served using Webpack. So I took inspiration from this starter app. This repo contains the example of switching between two themes at run time and is built using Craco. I tried to migrate from Craco to Webpack (Webpack sample).

After migrating to Webpack, theme switching is stopped working. When I inspect using the Chrome debugger, the code is changing, but the colors are not reflected in this change.

Can anyone help to resolve the issue? Thanks in advance.

Solution 1:^[1]

This is working for tailwind css 2.X version, not working for tailwind css 3.X version

Seems like need to add for tailwind css 2.X version

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

in postcss.config.js

Solution 2:^[2]

module.exports = {
 plugins: {
    'postcss-import': {},
     autoprefixer: {},
     tailwindcss: {},
 }
}

does this work for you?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Jamie Garcia

'Themes in Tailwind CSS are not working with Webpack and React

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]