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
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"
}
}
Inside the root folder create a postcss.config.js file and configure it as follows
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};
Create a file called .postcssrc at the same path and paste:
{
"plugins": {
"tailwindcss": {}
}
}
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: [],
}
In ./src create a file called index.css and fill it up:
@tailwind base;
@tailwind components;
@tailwind utilities;
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>
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>
);
To run it locally just run
npx parcel ./src/index.html
To build the project
npx parcel build ./src/index.html
⚠️ 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
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.
Top comments (1)
Based on above suggestions -----
When running npm start or npm run build, it gives a warning
subratadutta@Subratas-MBP react % npm run build
@parcel/transformer-postcss: WARNING: Using a JavaScript PostCSS config file means losing out on
the caching features of Parcel. Use a .postcssrc(.json) file whenever possible.
@parcel/transformer-postcss: WARNING: Using a JavaScript PostCSS config file means losing out on
the caching features of Parcel. Use a .postcssrc(.json) file whenever possible.
Any possible solution?