React and Tailwind CSS Setup

#javascript #react #tailwindcss #beginners

Hi everyone, I'm Filip and I am a JavaScript developer. This is my first blog post. Hope you like it and I would love to hear what you think of this post and how I can improve my writing in the future.

What we need

Terminal / Command Line (e.g. PowerShell on Windows, Zsh on Linux)
IDE (e.g. VS Code)
NodeJS - 8.11.3+
npm - 6.12.1+

1. Getting started

First we will install the npx package globally. This package allows us to execute packages from npm without installing them. When we run this command it downloads the package, executes it and deletes it. We will install it with the following command:

npm i npx -g

Now we will create a starter React app using the create-react-app package with the following command:

npx create-react-app my-react-app

This will create a React app in a folder named my-react-app ( the name is given in the command above ). Now we will change into the directory and install some packages that we need. For now we will need react-router-dom ( for navigating in the app ), tailwindcss ( for Tailwind ), autoprefixer ( for prefixing CSS for different browsers ) and postcss-cli ( for watching and reloading CSS updates ). We can do this with the following commands:

cd my-react-app
yarn add react-router-dom tailwindcss autoprefixer postcss-cli

If you want to see the initial app created so far you can run the following command:

yarn start

The app will be started on localhost:3000 and will display the standard new React App screen.

2. Setting Up Tailwind & PostCSS

Now we will set up the configurations for Tailwind and PostCSS. First we will initialize Tailwind into our project. We can do this by running the following command:

npx tailwindcss init

This will create a file called tailwind.config.js with an empty configuration for Tailwind. We can customize this as we want but for now we will leave it as is. Next we will set up the PostCSS config. Fot this we will create the config file manually. You can do this with the following command:

touch postcss.config.js

This will create a file called postcss.config.js . Now we can add the configuration for PostCSS in this file. You can copy and paste the following configuration in the file:

const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: [
      tailwindcss("./tailwind.config.js"),
      require("autoprefixer")
  ]
};

Now we can create a global styles file that will import Tailwind in our app. I recommend in the src folder that we create a folder called styles that will hold all the global styles that we need. In this folder we can create a file called tailwind.css or global.css ( besides tailwind in this file we can add some custom global overrides ). To use Tailwind all we have to do is put the following in the CSS file that we created:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* All other CSS will go here */

3. Connecting Tailwind, PostCSS, & React

Now we need to modify the starting scripts for the project that are defined in the package.json file. When we open the file if should look like this:

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "autoprefixer": "^9.7.5",
    "postcss-cli": "^7.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "tailwindcss": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

We will modify the scripts part of the file with the following commands:

"scripts": {
    "start": "npm run watch: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/global.css -o src/styles/main.css",
    "watch:css": "postcss src/styles/global.css -o src/styles/main.css"
}

Now we just need to import the CSS file that will be created when the app is built into index.js ( root of the app ) and we can start using Tailwind in our app. To do this just replace import './index.css'; with import './styles/main.css'; .

And that is it. Now we can start making beautiful React apps with Tailwind. For more info on how to use Tailwind I recommend the Tailwind documentation , it is very clear and has lots of examples.

The code for this tutorial can be found here.

Happy coding.