How to install React and Tailwind CSS for beginners

I will show you how to install Tailwind CSS and React locally in this step-by-step guide!

Create a new project

Start by creating a new React project, by opening the terminal and run

npx create-react-app my-project

This usually takes a couple of minutes.

After the installation of your React project is complete, go ahead and cd over to your project folder in the terminal and run

cd my-project
npm start

You should now see this on localhost:3000

Delete items

We are now going to delete everything in the src and public folder except for index.html, App.js, index.css, and index.js

Your project folder should look like this:

Editing files

Go ahead and replace everything in your index.html with this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Tailwind Starter</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Replace your index.js with this

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
    <App />,
  document.getElementById("root")
);

Open your App.js and replace the code with

import React from "react";

function App() {
  return (
  <div>
    <h1 className="text-2xl text-red-900">Hello World!</h1>
  </div>
  )
}


export default App;

And the index.css

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

Installing Tailwind CSS

Now it is time to install Tailwind CSS and its dependencies. We do this with npm. Inside your terminal run npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 This will install Tailwind, Post CSS 7 and Auto prefixer to your project.

CRACO

Create React App Configuration Override is an easy and comprehensible configuration layer for create-react-app.

We need to install CRACO, since Create React App won't let us override the PostCSS configuration.

So lets install CRACO with npm i @craco/craco

Open your package.json and replace

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

with this

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

You now need to create a file named craco.config.js in the root of your project. Copy and paste this inside

module.exports = {
  style: {
    postcss: {
      plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
      ],
    },
  },
}

Tailwind configuration

Create your Tailwind CSS configuration file: npx tailwindcss init And replace everything in tailwind.config.js with this:

  module.exports = {
   purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

This will purge the unused CSS in public/index.html and any .js, .jsx, .ts, .tsx files in any folders inside the src folder.

If you run npm start and your site looks like this, then everything is working as it should!

Resources: Tailwind CSS React CRACO

Sondre