DEV Community

loading...
Cover image for Setup your ReactJS + Tailwind CSS Project by creating a template πŸ”₯

Setup your ReactJS + Tailwind CSS Project by creating a template πŸ”₯

Shaan Alam
I am a self taught programmer currently learning Web Development. I work in JavaScript.
・3 min read

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
Enter fullscreen mode Exit fullscreen mode

Setting up Tailwind CSS

Install Tailwind CSS by typing -

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Enter fullscreen mode Exit fullscreen mode

Configure Craco

Install and configure craco by typing -

npm install @craco/craco
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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'),
      ],
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

Creating configuration file

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

npx tailwind init
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

Include Tailwind in your CSS

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

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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')
);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Commit changes

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

git add .
git commit -m 'initial commit'
Enter fullscreen mode Exit fullscreen mode

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)
Alt Text
Alt Text
After giving name, you will see something like this.
Alt Text
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
Enter fullscreen mode Exit fullscreen mode

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.
Alt Text
Alt Text

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 ⭐

Discussion (2)

Collapse
yougotwill profile image
William Grant

Nice post! This kind of template would work well using github.com/Rich-Harris/degit. It allows you to use a github repo as a template from the command line. :)

Collapse
shaan71845 profile image
Shaan Alam Author

Thanks! 😊😊 I am gonna use degit whenever I use a template repo next time.

Forem Open with the Forem app