Parcel, React & Tailwind to the moon 🚀
Tags: javascript, react, tailwindcss, parcel
Published: 2023-02-16 20:44:38

---
title: Parcel, React & Tailwind to the moon 🚀
published: true
description: In this article, we will learn how to develop a web application using Parcel, Tailwind, and React.
tags: javascript, react, tailwind, parcel
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-16 20:01 +0000
---

## Parcel, React & Tailwind to the moon

In recent years, thanks to modern technologies, developing web applications is easier than ever. In this article I will show you how to make it even easier by using Parcel, Tailwind, and React.
Parcel is a lightweight and fast bundler for web applications that allows you to manage your project easily and efficiently. Tailwind is a CSS framework used to create clean, modern interfaces, while React, well, it's React and needs no introduction. 
Without further ado, let's start creating our webapp!


```bash
mkdir my-webapp
npm init -y
npm i -D parcel
npm i react react-dom
mkdir src
touch src/index.html
npm i -D tailwindcss postcss
npx tailwindcss init
```

Before we dig into the code, we need to edit our `package.json` as follows, removing the `main` property

```json
{
  "name": "my-webapp",
  "version": "1.0.0",
  "description": "",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.8.3",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.6"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
```

Inside the root folder create a `postcss.config.js` file and configure it as follows

```javascript
module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
    ],
};
```

Create a file called `.postcssrc` at the same path and paste: 

```javascript
{
  "plugins": {
    "tailwindcss": {}
  }
}
```

Delete the code inside tailwind.config.js and add 

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
In `./src` create a file called `index.css` and fill it up: 

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

and fill up `./src/index.html`:

```html
<!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">
    <link href="./index.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./index.js"></script>
</body>
</html>
```

now create the `index.js` file where you will start to code using react. 

```javascript
import { createRoot } from 'react-dom/client';
createRoot(app).render(
<div>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</div>
);
```


To run it locally just run

```bash
npx parcel ./src/index.html
```

To build the project 

```bash
npx parcel build ./src/index.html
```

:warning: If you are facing an error regarding relative paths once you build and deploy your code on a webserver, you might need to build as it follows:

```bash
npx parcel build --public-url ./ ./src/index.html
```

### Concluding reflections

Using Parcel, React and Tailwind, it is easy to create a webapp quite efficiently. Using Parcel, you are able to manage your project effectively and quickly, integrating with React and Tailwind to create a worthy webapp.
 Don't forget to explore their advanced features to customize your development experience.