Getting 'Tailwind CSS' Up and Running With Parcel

October 06 2019

I love Tailwind CSS and, nearly all of the time, Tailwind CSS loves me.

If you’ve been living on Mars for the past few years and haven’t already heard, Tailwind CSS is a utility-first CSS framework. It, according to its website, “gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.” In short, it provides you with a host of customisable utility classes that are a joy to work with.

In this post, I’m going to describe how to get Tailwind CSS up and running with Parcel.

Parcel is a “great for the 90% use case” tool that is designed to be a comparable alternative to Webpack, though it requires significantly less configuration. You can get up and running in seconds and convert your LESS and SASS into standard CSS, modularise and minify your Javascript and compile your ‘.vue’ files into usable Javascript modules (plus a whole lot more!)

Let’s get started!

Installing the pre-requisites

I’m going to assume you simply want to compile and bundle your source CSS files into a single minified destination file. I’m also going to assume you have a package.json file present and correct.

Firstly, we need to install Tailwind and Parcel. Issue the following command in your project folder:

npm install –save-dev tailwindcss parcel-bundler

Then, generate the full version of the Tailwind CSS configuration file.

npx tailwind init –full

Great! Let’s integrate Tailwind into our Parcel build process.

Create and modify the PostCSS configuration file

Tailwind CSS is built as a plugin for a fantastic development tool called PostCSS. PostCSS allows you to use Javascript to write plugins that manipulate and generate CSS. Parcel supports PostCSS out of the box but in order to specify additional plugins we have to create a configuration file.

Firstly, create a ‘postcss.config.js’ file.

Secondly, within that file, enter the following:

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

Adding the Tailwind imports to your CSS files

Next, we need to tell PostCSS that we want to use Tailwind. To do that, we have to put the Tailwind imports in our main CSS/SASS/LESS file:

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

Fire her up!

Finally, we can start compiling our CSS that uses the Tailwind PostCSS plugin with Parcel.

Within a terminal in your working directory, issue the following command:

npx parcel build path/to/your/css/or/whatever/file.css

You should see something like the following which indicates success:

Screenshot

Closing notes

Using PostCSS and specifying additional plugins within a space of a few seconds is one of the many powerful and massively convenient things you can do with Parcel. For most of my projects it’s become the default bundler which saves me huge amounts of time (and hair) that I’d usually spend fighting with Webpack.

For more information on Parcel (including documentation) visit: https://parceljs.org/

For more information on Tailwind CSS visit: https://tailwindcss.com/