How To Use Your Tailwind Theme Anywhere Throughout Your React App
We will create a small application and show it in action by overriding some styles from the React Select library.
We are going with the basic Create React App template. Let's set that up and install the dependencies for today.
We want to have a
tailwind.config.js file that can be used to extend the Tailwind defaults. We won't do too much with it today, but let's create it to use without our script later.
This will create a
tailwind.config.js file at the root directory that looks like this:
Let's now write our script that will reference this file.
Updating our script
bin/generate-tailwind-theme, update the file to have the following:
Here, we follow these steps:
resolveConfigfrom Tailwind to combine our config and their default config. We are destructing
themefrom the result.
- Stringify the
themevalue and interpolate it within a string
- Writing that file out to
src/theme.jsafter 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:
Awesome! Now we have our theme config that we can use with React Context.
Setting up the Provider for our app
src/App.jsx file to look like the following:
ThemeContext that we have created using
createContext will allow the theme to be accessible with the
useContext hook throughout our application!
At the moment, our App will not run (we haven't created our
We're going to write an adapter file for our
Create a Select Adapter
Add a new
Select component file.
Now, inside that
src/Select.jsx file, add the following:
In this file, we are exporting the
BaseSelect with some default styles that come from our
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
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
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.teal, you will now see teal!
Congratulations, you now have access to your Tailwind theme values across your React application!
Resources and Further Reading
Image credit: Ibrahim Asad
See how you can dynamically create UIs based on React State using dynamic imports, Next.js 10 and React State
Have you ever wanted to build a UI Component Library with TypeScript and React? This blog post will take you through a straightforward set up that uses the bare minimum to get a working component library that you can re-use across your different React projects.
This post will go through a simple example of setting up simple authentication with a user and password to your Next.js website.
This blog post will explore the new internationalised routing in Next.js 10 and how you can use this to your advantage with react-intl for React.js
See a roundup of my look into Vercel's new analytics feature that you can enable on a Vercel project and see how I used GTMetrix to help push some numbers.
1,200+ PEOPLE ALREADY JOINED ❤️️
Get fresh posts + news direct to your inbox.
No spam. We only send you relevant content.