Hey, Shaan here!
As we all know that tailwind CSS is gaining popularity nowadays, so I decided to give a shot and learn tailwind css. After learning a little bit and creating a landing page with tailwind, I found it awesome and decided to use tailwind for my future React projects. But hey! configuring Tailwind with React is not an easy task. So, I thought why not create a template repository so that beginner ReactJS developers can use to quickly configure their projects. In this article, I will show exactly how to configure your ReactJS + tailwind css project & also how to create a template repository which you can use.

Creating a react app

Start by creating a new react app if you haven't already by typing using create-react-app.

npx create-react-app cra-tailwind-template
cd cra-tailwind-template

Setting up Tailwind CSS

Install Tailwind CSS by typing -

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

Configure Craco

Install and configure craco by typing -

npm install @craco/craco

Once it is installed, edit your 'scripts' section of your package.json file.

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

Next, we need to create a craco.config.js file at the root of your project and add the tailwindcss and autoprefixer as PostCSS Plugins.

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

Creating configuration file

Next, we have to generate our tailwind.config.js file like this -

npx tailwind init

This will create a tailwind.config.js file at the root of your project.

Edit tailwind.config.js file

Next, we have to edit our tailwind.config.js file. Configure 'purge' option with the paths of your components so that any unused styles in the production builds.

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

Include Tailwind in your CSS

Open src/index.css and include the following by using the @tailwind directive.

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

Finally include your index.css in your src/index.css file.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // include index.css
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

And that's it. This is how we configure ReactJS with Tailwind CSS.

Final Part - Creating a template repo for later use

In this section, I'll show you how to create a template repo which you can use in future so that you won't have to setup from the scratch.

Initialize a git repository.

Type the following command to create an empty git repo.

git init

Commit changes

Add the files to the staging area, and the commit the changes.

git add .
git commit -m 'initial commit'

Moving code to GitHub.

Log into your GitHub account and create a new repo y click the "+" icon on the top right hand corner. Provide a name for your repo (for example - react-tailwind-template)


After giving name, you will see something like this.

Now, type the following commands in your terminal

git remote add origin https://github.com/shaan71845/react-tailwind-template.git
git push -u origin main

You have successfully uploaded your code on GitHub!!

Creating template

After following the above steps, you will be redirected to your repo. Click on the Settings tab and check the Template repository option.

OR

You can use my Template repo to configure your ReactJS + Tailwind CSS Project.
Link 👇
https://github.com/shaan71845/cra-tailwind-template

Cick on Use as template to use this template.
Feel free to leave a ⭐