DEV Community

Sondre
Sondre

Posted on • Originally published at blog.iamsondre.net on

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

You should now see this on http://localhost:3000

react.png

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:

crafolder.png

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>

Enter fullscreen mode Exit fullscreen mode

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")
);

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

And the index.css

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

Enter fullscreen mode Exit fullscreen mode

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@^9This 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 let's install CRACO withnpm 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"
  },

Enter fullscreen mode Exit fullscreen mode

with this

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

Enter fullscreen mode Exit fullscreen mode

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"),
      ],
    },
  },
}

Enter fullscreen mode Exit fullscreen mode

Tailwind configuration

Create your Tailwind CSS configuration file:npx tailwindcss initAnd 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: [],
  }

Enter fullscreen mode Exit fullscreen mode

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! HelloWorld.png

Resources:
Tailwind CSS
React
CRACO

Discussion (0)