Use resolveConfig from Tailwind to combine our config and their default config. We are destructing theme from the result.
Writing that file out to src/theme.js after having our Prettier library format it.
We can now run this using bin/generate-tailwind-theme. If this doesn't work, you may need to check you have the correct permissions and shabang (#!) reference to your Node installation. If this doesn't work, feel free to run node bin/generate-tailwind-theme and see what happens.
After success, a short look into our src/theme.js file should look like the following:
In this file, we are exporting the BaseSelect with some default styles that come from our theme.
These theme values come from the theme.js object that have added to our context! This is possible at the line const theme = React.useContext(ThemeContext) where we set the theme to come from our context we set in App.js.
Note, the one quick here are the font family values theme.fontFamily.sans.join(" "). Basically, the fontFamily key values are an array, so for it to be valid for the font-family CSS property, we want to join that array to have a space between each value ie ['Open Sans', 'sans-serif'] as an example would become Open Sans,sans-serif.
This styling isn't perfect. They are just some styles I was playing around with this morning, but they illustrate the point.
Running the app
Let's get our app up and going the normal way:
You can now see that we have our Tailwind theme styles applied!
We can now see these changes in action. If we head back to our src/Select.jsx file and replace all instances of theme.colors.blue with theme.colors.teal, you will now see teal!
Congratulations, you now have access to your Tailwind theme values across your React application!