DEV Community

loading...

ParcelJS + TailwindCSS: Minimal setup.

rafael_abuawad profile image Rafo AV ・2 min read

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

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

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

Tailwind config

Go back to your terminal and type:

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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

Open up the styles.css file and write thw following content.

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

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

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

Go back to your terminal and type the following command:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Once npm finishes building your code go to localhost:1234 and you should see a indigo background with some text. That's all! πŸ¦‰

Discussion

pic
Editor guide
Collapse
shadear profile image
Shadear Bakr

Hello, in the setup section we created a .pcss file but you use .css after that. Did you mean .pcss ?