Estoy usando una arquitectura monorepo usando espacios de trabajo de hilo, en los que Tailwind CSS está en la raíz del proyecto. En uno de los espacios de trabajo estoy usando React y he agregado las utilidades Tailwind en sus estilos. Tailwind está funcionando bien en el proyecto todavía
tailwind.config.js darkMode: 'class' y he creado un contenedor de contexto para establecer class='dark' en html root, al cambiar el tema <html class='dark' está configurado aún dark:bg-black no funciona.Mi estructura de carpetas
Project | +-- packages | | | \-- react-project-1 | | | | | +--app.js | | +--app.css | | | \-- react-project-2 | +-- tailwind.config.jsMi 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: [], };¿Algunas ideas?
Agregar el objeto de colores directamente debajo theme reemplazará el conjunto de colores predeterminado con los colores que especifique. Si desea agregar colores al conjunto o anular los colores predeterminados únicos, debe colocarlos en una sección de theme: { extend: { colors: { ... } } } . Esto también puede solucionar su problema de modo oscuro.
theme: { extend: { colors: { orange: '#E05507', }, }, },Consulte: https://tailwindcss.com/docs/customizing-colors#adding-additional-colors
Además, ¿estás usando una versión anterior de Tailwind? El último, v3, ya no necesita mode: 'jit' y usa content: en lugar de purge: ( https://tailwindcss.com/docs/upgrade-guide#configure-content-sources ).
Moví el archivo postcss.config.js tailwind.config.js de la aplicación de reacción en lugar de mantenerlo en la raíz y reinicié el servidor. Luego se resolvió el problema del modo oscuro y los colores.