Tl;dr: Tailwind CSS is a utility-first CSS Framework. It is realised as a PostCSS plugin, which can’t be easily add to a Create React App environment. Luckily, since Tailwind provides a CLI as well, we can add that as a script running right before CRA’s react-scripts. You can find an example setup right here.
Disclaimer: I am by no means an expert in Tailwind CSS, but it sounds like a good match for a React app. There are quite a lot alternatives to styling React components, like CSS in JS projects, but the more the better, right? Let’s see how to integrate Tailwind CSS with React, maybe it’s really a cool thing.
Heads up in 2019 and beyond: While the way described below works and is valid, I wrote about a new and improved setup using styled components and a tailwind macro.
June ‘19: Updated to use the first Tailwind major relase, Tailwind v1
Tailwind CSS is a newly released utility-first CSS Framework. It’s value proposition is that it provides a lot of different utility CSS classes, instead of whole components. So designing an app means, you add CSS classes right to your html elements. These classes are highly composable and allow you to build components and full fledged designs with them. You can find more informations and explanations on their website, or by listening to the Fullstack Radio podcast 76, which I enjoyed quite a lot.
Kind of related image showing wind turbines and a highway as a metaphor for speed and wind. Photo by Andrea Boldizsar on Unsplash
After listening to the mentioned podcast I decided to give Tailwind a try in a React App. React encourages you to build small components and compose them together for a full app. This concept sounds like a perfect match for Tailwind CSS. It could be a great setup for any desdevs (like devop, but for designer and developer). Whenever I start tinkering with a React App, I reach for Create React App (CRA). That’s basically a CLI, which creates a React environment with no build configuration.
Ok, what would installing Tailwind mean then? So according to their documentation there are several ways of doing so. One is to add a css file from a CDN into your html. That works in our CRA setup, but you loose the nice customization options Tailwind offers.
Their recommended options is to add Tailwind CSS as a PostCSS plugin to your build chain. Although that’s surely a great option for many environments, it’s not that easy in a Create React App project. CRAs key benefit is, that they do all the configuration behind the scenes - that’s great. You could eject from CRA and customize PostCSS for yourself. But that would mean, loosing the easy upgrade path of CRA. Honestly, I suggest not ejecting from CRA, unless you really can’t avoid it. There seems to be a way of adding PostCSS plugins via a wrapper as described here, but that is not officially supported. I did not want to take that path.
Luckily, another installation option is a CLI-interface. Adding that to your npm scripts allows you to customize the CSS Framework, and also benefit from CRA’s start and build scripts.
You can find a newly created CRA project with Tailwind CSS integration right here.
Step by step setup
Let’s start with a new Create-React-App project by executing the following commands:
# Replace cra-tailwindcss with whatever you want to name your project
npx create-react-app cra-tailwindcss
# Wait for it to finish
cd cra-tailwindcssIn the generated folder is your brand new React App project, feel free to try it out by running npm run start.
Next step is installing Tailwind CSS by running the following commands in your project’s root directory:
# install tailwind to your project
npm install tailwindcss --save-dev
# optionally create a tailwind configuration file
npx tailwind initThe last command generates a basic Tailwind configuration file. Since version 1 of Tailwind, this file is optioinal, meaning you only need it if you want to change Tailwinds standard configuration. Read more about the configration options in Tailwinds’ documentation.
Create React App includes a global css file under ./src/index.css. Delete this file, as this is where we let Tailwind CSS generate it’s utility classes to. Now create a new file called ./src/index.tailwind.css with the following content:
@tailwind base;
@tailwind components;
@tailwind utilities;These are Tailwind’s directives, which declare what to include. Again, there is more information in their docs.
The last step is to add the Tailwind build command to our tooling scripts. Open your projects’ package.json and add the following prebuild and prestart tasks:
"scripts": {
"prestart": "tailwind build ./src/index.tailwind.css -c ./tailwind.config.js -o ./src/index.css",
"start": "react-scripts start",
"prebuild": "tailwind build ./src/index.tailwind.css -c ./tailwind.config.js -o ./src/index.css",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},Fell free to omit the -c ./tailwind.config.js option if you don’t need use a configuration file.
One npm run start and we are ready to use the Tailwind CSS utility classes in all our react components.
Closing thoughts
The above suggested setup runs the Tailwind command only when running the start command, not on every file changes. The react-scripts however still runs on change, which allows you to add classes to your components and see the outcome immediately.
Not regenereting the CSS all the time is actually not that big of a problem. Remember, using Tailwind CSS means for the most part, you actually don’t write css, you only add CSS classes to elements.
You could also take that a step further and use Tailwinds’ functions and directives in CSS. That would require you running the Tailwind CLI on different CSS files as needed. You could write a shell script to accomplish that. But, for the beginning, the setup described above should be sufficient.
I hope, this allows you to try using Tailwind CSS and see how it works for you. If you have problems or want to discuss, feel free to contact me on my twitter @kriswep.