Theme.json setting not applyed to tailwind classes
-
Hello,
So I have made settings in the theme.json file, but the settings didn’t create a tailwinnd classes, so I can’t use them. For example I have added a custom font with slug base, but when I want to use font-base, the compiler retrusn error that this class don’t exist.
Here is my theme.json file
{
"version": 1,
"settings": {
"layout": {
"contentSize": "960px",
"wideSize": "1280px"
},
"color": {
"palette": [
{
"name": "Primary Red",
"slug": "primary-red",
"color": "#ed2124"
},
{
"name": "Primary Gray",
"slug": "primary-gray",
"color": "#424142"
},
{
"name": "Primary Black",
"slug": "primary-black",
"color": "#f7f7f7"
},
{
"name": "Secondary Blue",
"slug": "secondary-blue",
"color": "#6c8eb2"
},
{
"name": "Secondary Gray Light",
"slug": "secondary-gray-light",
"color": "#d3d2d2"
},
{
"name": "Secondary Gray",
"slug": "secondary-gray",
"color": "#787878"
}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "\"Nunito\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, serif",
"name": "Nunito",
"slug": "base",
"fontFace": [
{
"fontFamily": "Nunito",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/static/fonts/nunito/Nunito-Regular.woff2"]
},
{
"fontFamily": "Nunito",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"src": ["file:./assets/static/fonts/nunito/Nunito-Bold.woff2"]
},
{
"fontFamily": "Nunito",
"fontWeight": "400",
"fontStyle": "italic",
"fontStretch": "normal",
"src": ["file:./assets/static/fonts/nunito/Nunito-Italic.woff2"]
},
{
"fontFamily": "Nunito",
"fontWeight": "700",
"fontStyle": "italic",
"fontStretch": "normal",
"src": [
"file:./assets/static/fonts/nunito/Nunito-BoldItalic.woff2"
]
}
]
}
],
"fontSizes": [
{
"name": "Extra Small",
"slug": "xs",
"size": "0.75rem"
},
{
"name": "Small",
"slug": "sm",
"size": "1.125rem"
},
{
"name": "Base",
"slug": "base",
"size": "1rem"
},
{
"name": "Regular",
"slug": "regular",
"size": "1.5rem"
},
{
"name": "Large",
"slug": "lg",
"size": "1.75rem"
},
{
"name": "Extra Large",
"slug": "xl",
"size": "2rem"
},
{
"name": "2XL",
"slug": "2xl",
"size": "2.68rem"
},
{
"name": "3XL",
"slug": "3xl",
"size": "3.56rem"
},
{
"name": "4XL",
"slug": "4xl",
"size": "4.75rem"
},
{
"name": "5XL",
"slug": "5xl",
"size": "6.31rem"
},
{
"name": "6XL",
"slug": "6xl",
"size": "8.37rem"
}
]
}
}
}
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- You must be logged in to reply to this topic.