Adebola's Blog

How to setup tailwindcss with create-react-app.

April 01, 2020

Tailwindcss provides a modern spin on writing css. And unlike bootstrap, it allows us write css without predefined classes i.e we can create our own custom styles without external opinions on how things should look.

Setting up tailwind is pretty straightforward, but with React, it might seem a little daunting. Here’s a quick tutorial to get you started creating awesome class-based inline styles using tailwindcss.

  1. Create a new react app(duhh!).
$ npx create-react-app tailwind-app && cd tailwind-app
  1. Install all the packages we need; tailwindcss itself, postcss-cli(helps us extract tailwind utility classes into our own css files) and autoprefixer(helps us ensure that the CSS we write is supported in all browsers). Let’s install them as development dependencies by using the -D flag.
npm i tailwindcss postcss-cli autoprefixer -D
  1. Run the following command to generate a tailwind configuration file. This file contains all the tailwind classes you will ever need!
npx tailwind init --full

you should now see a tailwind.config.js file in your root directory.

4.Now, we need to setup our Postcss config to help us build our css files. First, let’s create the configuration file. Create a new file called postcss.config.js in your root directory. You can also use the command below if you prefer using the CLI.

touch postcss.config.js
  1. Next, copy and paste the following block of code into the postcss.config.js file. This block of code tells postcss to use the tailwindcss and autoprefixer plugins when creating out css/scss file.
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
}

Autoprefixer is a CSS post processor. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code against caniuse.com.

  1. Next, let’s create a styles directory. I like to keep my styles folder inside my src folder. Inside the src/styles directory, create a tailwind.css file. Then move your index.css file inside this src folder.

Your file structure should now look like below.

src
  - app.jsx
  - index.jsx
  styles
    - index.css
    - tailwind.css

Make sure to update the reference to index.css in your index.jsx to

import./styles/index.css”
  1. Head into tailwind.css. We need to inject the tailwind utility classes into the file. Add the following block of code. We specify the tailwind utility classes we want in the tailwind.css file. From here, postcss will extract the classes from the declarations and push them into our index.css file as you will see.
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Finally, head into your package.json file. We need to make some changes to our scripts here to ensure that Postcss bundles all our css from tailwind.css into our index.css file.

First, we create a build:css script/command. We use the postcss command (made available by the postss-cli) to extract the tailwind classes from tailwind.css and output it into index.css.

"scripts": {
    "start": "npm run build:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/index.css"
  }
  1. Your package.json scripts should now look like above.

Simply run npm start, like you normally would and your app should start running. You would notice that our index.css file now contains all the css classes tailwind provides.

All the tailwind classes are now available to use. I like to refer to the documentation to see the class names sometimes but generally, a lot of the class names are intuitive if you’re coming from bootstrap.

If you’re looking to add additional CSS styles, you can add them inside the tailwind.css file we have created.

@tailwind base;

@tailwind components;

@tailwind utilities;

.my-color{
    background-color: red;
}

NB Each time you make a change to the tailwind.css file, you would need to rebuild the css by stopping the server and running npm start again.

In production, you should only use the CSS classes that you have used in developing your app and not all the classes provided by tailwind. Here’s a link to how to do that. This way you ensure that your App size remains small.

How to reduce tailwindcss file size in production


Written by Adebola Adeniran, I love Nigerian Jollof (> Ghana jollof) and Plantain. Follow me on Twitter.