nested class not working -tailwind style not reflected
Unanswered
West African Lion posted this in #help-forum
West African LionOP
const customColors = require('./styles/colors');
const customFonts = require('./styles/fonts');
const components = require('./components/Header');
module.exports = {
theme: {
extend: {
colors: {
custom: customColors,
},
fontFamily: {
...customFonts.family
},
fontSize: {
...customFonts.size
},
fontWeight: {
...customFonts.weight
},
lineHeight: {
...customFonts.height
},
header:{
// header:components
header:components.size
}
},
},
variants: {},
plugins: [],
}; if I give tailwind config like this, in the component class I can't access the classNmae="text-header-color" if color is an object value inside header
const customFonts = require('./styles/fonts');
const components = require('./components/Header');
module.exports = {
theme: {
extend: {
colors: {
custom: customColors,
},
fontFamily: {
...customFonts.family
},
fontSize: {
...customFonts.size
},
fontWeight: {
...customFonts.weight
},
lineHeight: {
...customFonts.height
},
header:{
// header:components
header:components.size
}
},
},
variants: {},
plugins: [],
}; if I give tailwind config like this, in the component class I can't access the classNmae="text-header-color" if color is an object value inside header
2 Replies
For
custom: customColors, it should be text-custom-[color]. And please [use a codeblock next time](https://nextjs-faq.com/good-question#messy-code-blocks-and-message-formatting).West African LionOP
@fuma only for colors its working that way, but not for the rest