Browser extensions - adding Tailwind CSS

Yesterday we made our very first new tab browser extension. However, it was solely powered by plain CSS. This can become super hard to maintain over time, so let’s see if we can automate much of it by introducing Tailwind CSS.

The main benefit of adding Tailwind is that it can only use its auto-purge option to include classes we are using on the page.

To handle the builds, I will also add Parcel, a super slim bundling tool we can use to do the heavy lifting.

Installing the dependencies permalink

If you like to follow this article, you can take the following GitHub repo as the starting point.

As we had a plain HTML starter before, we first have to init a package file.

npm init -y

Open the project and execute the following commands for this project in the terminal.

npm i parcel tailwindcss

This will install Parcel and Tailwind CSS packages.

Then we also need some dev dependencies.

npm i -D parcel-reporter-static-files-copy postcss-cli

This will install the Parcel static file copier and postCSS CLI. We will use these to clean up our build process.

And that’s already it. We now have all the needed packages.

Migrating the static files permalink

Since we installed the Parcel static file reporter, we can leverage its powers to move files that never change to our dist output.

Create a static folder in the root of your project, then move the manifest and the icons folder inside of it.

For it to work, we also need to create a .parcelrc file and put the following contents inside.

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["parcel-reporter-static-files-copy"]
}

This will ensure the static directory is always copied to our dist output.

The Tailwind setup permalink

Next, we want to look at how we can introduce the Tailwind setup to work.

First of all, add a .postcssrc.json file in the root project, this is a postCSS config file, but since it’s built into Parcel, they will handle most of the config.

Put the following lines inside of this file.

{
  "plugins": {
    "tailwindcss": {}
  }
}

Next up, create the Tailwind config file by running the following command.

npx tailwind init

You can modify it to look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['*.html'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Now open up the existing css/style.css file and replace everything inside with the following lines.

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

And that’s it. Our tailwind config is already done.

Putting it all together permalink

Now that we have all the individual players lined up, we need to combine them. This magic happens in the package.json file.

Add the following scripts to the file.

{
	...
  "scripts": {
    "prebuild": "rm -rf dist .parcel-cache",
    "watch": "parcel watch new-tab.html",
    "build": "parcel build new-tab.html"
  },
}

We state that any prebuild should remove the parcel cache and dist directory. The watch command can be used while you are developing the extension, and it will auto-reload for you. Once satisfied, you can generate a final build by running the following command.

npm run build

To test it out, you have to follow the steps described in this article, but pick the dist folder to be loaded.

And that’s it! You now have an extension powered by Tailwind CSS and Parcel.

You can also find the complete code sample on this GitHub repo.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter