Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. It is designed as a low-level framework that gives you all the building blocks you need to make your own designs without fumbling with `!important`, and usually, without ever leaving your template.
I first heard about Tailwind from one of its creators, @reinink, and I've been following its progress since one of the earliest pre-release versions. I used it in a few Angular projects at the time, and I've loved it ever since.
Recently, I learned to configure Tailwind CSS for use in a React app bootstrapped with
create-react-app, or CRA, without having to run the dreaded
eject script. I will show you how to do the same in this post.
First, bootstrap a React app using the CRA CLI tool by running the following command:
npx create-react-app tailwind-cra --template typescript
yarn create react-app tailwind-cra --template typescript
The command will create a single-page React application with a modern build setup for you. When the command runs successfully, you can
cd into the directory and run
npm start or
yarn start to see your app running at
http://localhost:3000. You can skip this step if you are looking to integrate Tailwind into an existing CRA project.
Note: I will be using Yarn to add packages and run/build my app. You can always replace
npm and the corresponding command name without any issues.
Next, you need to install Tailwind CSS. Per the Tailwind CSS documentation, you only need to run one command. Make sure you are in the root directory of your newly created React app, then run the following command:
yarn add tailwindcss
If it runs successfully, it should output the following and make Tailwind available in our project:
Next you need to add Tailwind to your CSS using the
cd into your project's
src directory and add the following to your project's topmost CSS file. In my case, it is the
Before going ahead to process your CSS with Tailwind, you can generate a Tailwind config file and modify it (override the defaults, extend or add your own keys) by running the following command:
npx tailwindcss init
This is entirely optional, but it's very useful if you want to create your own theme based on your brand colours or remove utilities or components that you don't need. Which is exactly why you're here and not reading the docs of some popular CSS framework. *cough* Bootstrap *cough*
Overriding the Create-React-App config
The final step would be to add Tailwind as a "
PostCSS plugin in your build chain". For a CRA app, however, you do not have access to the underlying
webpack configuration unless you run the dreaded
yarn run eject command, from which there is no going back. Ever.
In other words, by installing
react-app-rewired, you can make modifications to the underlying
webpack config without running
yarn run eject. That way, if you ever want to go back, you simply have to undo the changes you made in this step and act like nothing happened. What CRA doesn't know, right?
Make sure you are in your project's root directory, then run the following commands:
yarn add customize-cra react-app-rewired --dev
The first command will create a file named
config-overrides.js in your project's root directory while the second command will add the
react-app-rewired packages as devDependencies for your project.
Next, open your
package.json file and make the following modifications to the scripts section:
We are replacing the existing calls to
test. Please leave the
eject script as-is. There are no configuration options to change for the
While you can always go back, from this point on please do note that, "stuff can break".
Finally, open the
config-overrides.js file you created earlier and add the following contents to it:
What you've done is import the
override() function from the
customize-cra package and called it with the
addPostCssPlugins() plugin. This plugin accepts an array with the PostCSS plugins you need for Tailwind CSS, namely the
autoprefixer plugins. Tailwind should now be available for you to use in your project.
To see how amazing Tailwind is, let's have you create a nice-looking card without writing a single line of CSS. How cool is that, really? You'll see.
cd into your src directory and delete the
App.css file that comes with a fresh CRA application.
Then, replace the contents of your
App.tsx file with this:
Make sure to check out the section on the Tailwind Docs about reducing the file size for the CSS Tailwind generates for you.
Cheers and have fun working with Tailwind!
The code for this project can be found on Github.