React JS and Tailwind CSS boilerplate | React JS and Tailwind CSS project setup

 

How to Create React JS and Tailwind CSS boilerplate / project setup

---

Prerequisites :

1. Install latest Node JS version in your system.

Steps to create project setup:

1. Create a react app project by using Create React APP with below command.

 npx create-react-app tailwindcss-react-boilerplate

The above command will create a project structure for the basic react app. Once the app creation is completed, switch to the project folder with below command.

cd tailwindcss-react-boilerplate

2. Install tailwind css using npm and other tailwind css dependencies

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3. Install CRACO to override the PostCSS configuration natively.

npm install @craco/craco

4. Now open package.json file and replace the start, build and test scripts lines with below lines.

"start": "craco start",
"build": "craco build",
"test": "craco test",

5. Now create craco configuration file to add tailwindcss and autoprefixer.

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

6. Now create tailwind configuration file by running below command. It will automatically generate the configuration file.

npx tailwindcss init

7. Now open the tailwind configuration file and replace the purge property with below line of code.

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html']

8. Now navigate to the index.css file and add the below lines.

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

9.  Now run below command to launch the React JS application.

npm run start

Tailwindcss and React JS boilerplate - Download

Read More »