Use Tailwind's resolveConfig helper to load the final merged/resolved config

[philwolstenholme]

The recommended way of loading Tailwind config programmatically is to use the resolveConfig helper. The reason for this is that in most Tailwind setups, any custom theme config is merged with a set of default config. If we just require the config file directly then we will have access to the custom theme config, but not to any of the default values.

I realised after mentioning this to @hankchizljaw on Twitter that this isn't as useful as I thought it might be for this repo as the prototype creates a set of config items completely from scratch by providing an empty presets array in the Tailwind config, so there are no default values being used, just the values being explicitly set inside the Tailwind config file.

Still, it doesn't hurt to load the config this way and it might be useful for others using this repo as an example, or if, in the future, a client removes the presets config item. As an example, this would let them create custom properties for the borderRadius values provided by Tailwind's default theme, even if they didn't have a customised borderRadius object in their Tailwind config file's theme section.

[netlify]

✔️ Deploy Preview for cube-css-with-tailwind ready!

🔨 Explore the source changes: f3902e8

🔍 Inspect the deploy log: https://app.netlify.com/sites/cube-css-with-tailwind/deploys/61f9a41c1b95420007a398b8

😎 Browse the preview: https://deploy-preview-3--cube-css-with-tailwind.netlify.app

[philwolstenholme]

For anyone reading this in the future and using the out-of-the-box Tailwind config, if you start generating custom properties for more varied parts of the Tailwind config then you may find that the css-props-generator.js script needs adjusting to handle the different structures used within the default Tailwind config. For example, colors can contain key/pair values like transparent: 'transparent', but also objects with named keys for different shades, and fontSize contains recommended line-height values as well as font-size values. I wrote a bit more about this in an article about using Tailwind config inside Style Dictionary, which might be useful for anyone who stumbles upon this.