Setting up Tailwind CSS v2 With Parcel
By: Matt Naus
Tags: Parcel Js, Front End Development, Tailwind Css

TL;DR

A simple setup using Taiwind CSS version 2 together with Parcel. Github repo can be found here: https://github.com/tailwindclub/tailwindv2-parcel

Marrying Tailwind CSS with Parcel

Yes, Webpack is still the go-to build tool out there and few alternatives can rival its power and flexibility. Few can also rival the complexities in setting up a Webpack based project.

Enter Parcel. A “configuration-less” alternative to Webpack. While I am not going to cover the tool in depth in this article, I have to say I am super impressed by its ease of setting up. I can definitely see Parcel being a winner for smaller projects that require less built complexity. It does indeed work out of the box, with literally zero configuration effort, while supporting pretty much any asset a typical project would use (Javascript, HTML, images, fonts, etc).

In this article, I will cover how to setup a Tailwind v2 + Parcel project, from scratch, step by step.

Setting up a Git repo and initializing Yarn/NPM

We will need to start off by creating a folder where we will setup our new project:

mkdir tailwindparcel cd tailwindparcel

Now that we are inside our project folder, we can initialize our Git repo and setup Yarn/NPM:

The “-y” parameter in the above command will skip the list of questions used to populate the initial package.json file. If needed, you can manually edit the contents of the package.json file later on.

Please note that initializing a Git repo is not required, so feel free to skip this step if you are not planning to use Git version control.

Adding dependencies

The first dependencies we will be installing are Tailwind, PostCSS and autoprefixer (Tailwind requires both PostCSS and autoprefixer).

Please note that we are installing Tailwinds official PostCSS 7 compatibility build, rather than the default, PostCSS 8 build. For some reason, I have not been able to make this setup work with the regular build. This has no effect on Tailwind at all though, all Tailwind v2 features are available and be used without issues.

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

The “ — save” parameter will make sure our dependencies get added to the package.json file.

Next, we will add Parcel to our project:

npm install --save parcel-bundler

Now that we have the basic dependencies installed in our project we will move on with installing some additional development dependencies. I will give a short description for each of these, however I will not cover these in depth.

postcss-purgecss plugin

PurgeCSS cleans up un-used CSS during the built process. More details here.

npm install --save-dev @fullhuman/postcss-purgecss

cssnano

CSS minifier for PostCSS. More details here.

npm install --save-dev cssnano

ESLint and related plugins

Library that makes sure our Javascript is nicely formatted. More info here.

npm install --save-dev eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

npm-run-all

Handy tool that allows us to run multiple NPM scripts simultaneously. More info here.

npm install --save-dev npm-run-all

postcss-cli

Command line interface tools for PostCSS. More info here.

npm install --save-dev postcss-cli

postcss-fontpath

PostCSS plugin that automatically generates src values for @font-face rules based on the path to your font files. More info here.

npm install --save-dev postcss-fontpath

posthtml plugins

Similar to PostCSS, PostHTML allows us to process HTML with Javascript. We mainly use this to allow the usage of HTML partials in our HTML code (more on this further down):

npm install --save-dev posthtml-expressions posthtml-include posthtml-load-config

stylelint-config-standard

npm install --save-dev stylelint-config-standard

Configuration files and folder structure

Now that we have our dependencies all installed, we can move on to setting up the required configuration files and our project folder structure.

postcss.config.js

This file will need to be created in the project root folder.

You can see that we are loading the postcss-fontpath plugin here to process our font paths. The tailwindcss directive points to the tailwind.config.js file, which we will create next. I have commented out the purgecss plugin, as I have not been able to get postcss to properly process the ENV variable, resulting the purgecss plugin removing all unused CSS while in development mode (which I found a tad annoying). When building for production, you’ll want to uncomment the purgecss plugin line.

ENV variable, resulting the purgecss plugin removing all unused CSS while in development mode (which I found a tad annoying). When building for production, you’ll want to uncomment the purgecss plugin line. https://gist.github.com/tailwindclub/bc5294f31c2b3f3f5f9d0b61f860ad94.js</a> "> You can see that we’re loading the postcss-fontpath plugin here to process our font paths. The tailwindcss directive points to the tailwind.config.js file, which we’ll create next. I have commented out the purgecss plugin, as I haven’t been able to get postcss to properly process thevariable, resulting the purgecss plugin removing all unused CSS while in development mode (which I found a tad annoying). When building for production, you’ll want to uncomment the purgecss plugin line.

This is the standard content for the Tailwind configuration file and it allows you to modify the framework where/when needed. More information can be found on the official Tailwind website.

posthtml.config.js

Another configuration file that will need to be created in the project root folder:

purgecss.config.js

This is final configuration file we will need to add, again to the project root folder:

This configuration file will instruct the PurgeCSS library how to purge our compiled CSS when we are running a production build.

Now that we have our configuration files in place, we will move onto adding some folders and files to our project.

In the project root folder, we will add a folder named “src” which will contain our projects source files. It should have the following structure:

src/assets/css/index.css

This file can remain empty (its content will be loaded during the build process)

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

The src/assets/fonts and src/assets/img folders are empty as the sample project does not use any images or custom fonts. However, if you choose to use additional assets, you would place them in these folders and reference them from the index.html file. For example, if you would like to include an image named “logo.png” in your index.html file, you add an image tag like this:

src/assets/js/index.js

This file serves as a placeholder for any additional Javascript you would like to load in your Tailwind pages. For testing purposes, we will add the following code so we can make sure the Javascript loads properly:

console.log("Hello world");

src/index.html

This file serves as the entry point of our new Tailwind page and references any other resources we want to include. It should look something like this:

In the head section, we reference the main index.css file, which includes all Tailwind css plus any additional custom CSS we have placed in src/assets/css/index.pcss.

In the body section, we reference an HTML partial (more on this further down) and the Javascript we want to include in the page.

src/partials/header.html

I prefer to keep my markup stored in reusable chunks, or partials, for easier maintenance and better code organization. This is optional though, you could also dump all your markup directly into the src/index.html file if you prefer this. For sample project, we are using an HTML partial header.html with the following contents:

Adding our NPM scripts

The final piece of the puzzle: our NPM scripts. These scripts will be used to use Parcel, either to fire up the development environment, or to create a production build.

To create these scripts, we will need to modify the package.json file and add a scripts section:

Please make sure you only add the scripts section and do not make any further changes to the package.json file, as this might break your project.

We will only invoke the last three scripts from the command line: clean, build and start:

yarn clean

yarn start

yarn build

The remaining NPM scripts are not meant to called from the command line and server to make sure PostCSS and Parcel do what they should during the start and clean commands.

Wrapping up

And there you have it: a fully functional Tailwind + Parcel development environment!

To start playing around with Tailwind, simply run:

yarn start

If you are ready to create a production build, run:

yarn build

The above command will create a production build in the default /dist folder.

Further reading

Credits

I took some inspiration from Nestor Vera’s tailwindcss-parcel-boilerplate repo (in particular with regards to the excellent NPM scripts).