In this short post I'll teach you how to setup ParcelJS (A web application bundler) with TailwindCSS (A CSS utilities library).
Create an empty Node Project
Let's start with a new NodeJS project. Open up a terminal and type the following:
mkdir your-app
cd your-app
npm init -y
Install the needed dependencies
Now we are going to install parcel-bundler, postcss, autoprefixer and tailwindcss.
npm install parcel-bundler postcss-modules autoprefixer tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
As of today (when I'm writing this) Parcel uses PostCSS 7 and Tailwind needs PostCSS 8. The npm install command showed up will fix this issue.
PostCSS config
Add a postcss.config.js file at the root folder of your project, and add the following:
// ./postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Tailwind config
Go back to your terminal and type:
npx tailwindcss init
This command will create a Tailwind config file for you at the root folder.
Set up the project
At the root folder create a src folder, this folder will contain all of your html, css and javascript files.
Inside this src folder create a index.html file, a styles.pcss file and a main.js file. Your folder structure should be looking like this:
--/ your-project
--/ src
-/ index.html
-/ main.js
-/ styles.css
-/ package.json
-/ postcss.config.js
-/ tailwind.config.js
Open up the styles.css file and write thw following content.
@tailwind base;
@tailwind components;
@tailwind utilities;
Then open up the index.html file and write thw following content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your app</title>
<link rel="stylesheet" href="styles.pcss">
<script defer src="main.js"></script>
</head>
<body class="bg-indigo-500">
<h1>App</h1>
</body>
</html>
Now we need a way to run the whole thing. Open up the package.json file, and at the scripts part write this:
//...
"scripts": {
"dev": "npx parcel -p 1234 watch src/index.html",
"build": "npx parcel src/index.html",
}
//....
Go back to your terminal and type the following command:
npm run dev
Once npm finishes building your code go to localhost:1234 and you should see a indigo background with some text. That's all! π¦
Discussion
Hello, in the setup section we created a .pcss file but you use .css after that. Did you mean .pcss ?