• 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)
  • 1.WordPress theme.json only applies to Gutenberg Editor, not Tailwind
    2.To use these styles in Tailwind, manually add them to tailwind.config.js
    3.Ensure Tailwind is installed and enqueued in your theme
    4.use json validator like jsonformatter or Validatejson to validate theme.json

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.