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
- Whenever I define new colors it is not working.
- Moreover I also want to implement darkMode to which in
tailwind.config.jsi have addeddarkMode: 'class'and have made a context wrapper to set class='dark' to html root, on changing the theme<html class='dark'is set yetdark:bg-blackis 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?
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
- Whenever I define new colors it is not working.
- Moreover I also want to implement darkMode to which in
tailwind.config.jsi have addeddarkMode: 'class'and have made a context wrapper to set class='dark' to html root, on changing the theme<html class='dark'is set yetdark:bg-blackis 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?
Share Improve this question edited Feb 1, 2022 at 15:40 Ed Lucas 7,3554 gold badges40 silver badges50 bronze badges asked Feb 1, 2022 at 15:22 prashantprashant 2602 silver badges11 bronze badges3 Answers
Reset to default 2Adding 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./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./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
Just a note for Tailwind 4 users, tailwind.config.js no longer applies. See "explicitly registering sources" section of Detecting classes in source files.