I am using a monorepo architecture using yarn workspaces, in which Tailwind CSS is at the root of the project. In one of the workspaces I am using React and I have added Tailwind utilities into its styles. Tailwind is working fine in the project yet
tailwind.config.js i have added darkMode: 'class' and have made a context wrapper to set class='dark' to html root, on changing the theme <html class='dark' is set yet dark:bg-black is not working.My folder structure
Project
|
+-- packages
| |
| \-- react-project-1
| | |
| | +--app.js
| | +--app.css
| |
| \-- react-project-2
|
+-- tailwind.config.js
My tailwind.config.js
module.exports = {
mode: 'jit',
purge: [
'./packages/react-project-1/src/**/*.{js,ts,jsx,tsx}',
'./packages/react-project-2/src/**/*.{js,ts,jsx,tsx}',
],
darkMode: 'class',
theme: {
colors: {
orange: '#E05507',
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Any ideas?
Adding the colors object directly under theme will replace the default color set with the colors you specify. If you want to add colors to the set or override single default colors, you should put them in a theme: { extend: { colors: { ... } } } section. This may also fix your dark mode issue.
theme: {
extend: {
colors: {
orange: '#E05507',
},
},
},
See: https://tailwindcss.com/docs/customizing-colors#adding-additional-colors
Also, are using an older version of Tailwind? The latest, v3, no longer needs mode: 'jit' and uses content: instead of purge: (https://tailwindcss.com/docs/upgrade-guide#configure-content-sources).
I have moved the tailwind.config.js and postcss.config.js file inside the react app instead of keeping it at root and restarted the server. Then both darkMode and colors issue was resolved