Installing Tailwind CSS with parcel for basic html template

Very basic template for using HTML, CSS with Tailwind.

August 05, 2022 • Code

When building a lightweight website, sometimes you may want to use just plain HTML, CSS and JavaScript. But in this case, I also wanted to use Tailwindcss as well. Here’s a quick tip in setting up a website to use Tailwindcss in native HTML site.

Parcel

Install Parcel

I realized in order to use Tailwindcss, a good bundler would be Parcel.

yarn add parcel-bundler
npm install parcel-bundler

Updated Package.json “scripts”

// In my case, the entry file was index.html
{
  "scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
  }
}

Tailwind

Install Tailwindcss

In installing the Tailwindcss, I’ve had some issue with PostCSS plugin requiring PostCSS 8. Thus, I’ve installed the site with PostCSS 7 compatibility build.

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Create PostCSS Plugin file

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

Create tailwind.config.js file

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

For default build guide, please check the official installation documentation.

Add Tailwind to your CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

Link your CSS file to your index.html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOCUMENT</title>
    <!-- This is a file which contains the Tailwind CSS code which we added in previous step -->
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Run and build your site with Parcel

npm run dev
npm run build

For production, make sure the server is fed through ./dist folder.

yarn add parcel-bundler npm install parcel-bundler

yarn add parcel-bundler npm install parcel-bundler

Invely's