TheLazy.Dev
Portfolio GitHub

Blog

javascript |react |tailwindcss |parcel

Parcel, React & Tailwind to the moon 🚀

matthewsaintbull

Matteo Santoro

Posted on February 16, 2023

Parcel, React & Tailwind to the moon 🚀

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!

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

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

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

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

module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
    ],
};
Enter fullscreen mode Exit fullscreen mode

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

{
  "plugins": {
    "tailwindcss": {}
  }
}
Enter fullscreen mode Exit fullscreen mode

Delete the code inside tailwind.config.js and add

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

In ./src create a file called index.css and fill it up:

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

and fill up ./src/index.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>
Enter fullscreen mode Exit fullscreen mode

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

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

To run it locally just run

npx parcel ./src/index.html
Enter fullscreen mode Exit fullscreen mode

To build the project

npx parcel build ./src/index.html
Enter fullscreen mode Exit fullscreen mode

⚠️ 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:

npx parcel build --public-url ./ ./src/index.html
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
matthewsaintbull
Matteo Santoro

Posted on February 16, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Parcel, React & Tailwind to the moon 🚀
javascript Parcel, React & Tailwind to the moon 🚀

February 16, 2023