How to Setup Tailwind CSS With Parcel Bundler

Introduction

Hi all, this is Adi. Today, I wanted to share with you my experience in setting up Tailwind CSS with Parcel Bundler. if this interests you, continue reading.

I am a long time fan of Bootstrap since version 2. I have used it for nearly all my projects. Bootstrap 4 introduced many new utility classes that have made my life a little easier and my markup more readable. But lately, I have been hearing so much about the brand new CSS framework named Tailwind CSS. I am quite confident that you might have heard about it as well. So, I decided to give it a try. I read through their documentation, and it was as though it was made for me... this framework is so generic, it will feel the same for anyone.

First, I tried it with the hosted version of the framework. It has so much flexibility. Now I wanted to take it a step further and see how I could set it up in my development workflow. This is where things became tricky. Their documentation had instructions for Webpack, Gulp, Laravel Mix, and a bunch of other JS tools, but not for the one I use, Parcel Bundler. It took me a while before I could get Tailwind to work with my existing Parcel setup.

Source Code Here

You may also like: Utility-First CSS With Tailwind

My Setup

First, let’s add the new dev dependencies to your package.json file. You need parcel-bundler, postcss-modules, and tailwindcss. PostCSS is a CSS per-processor that Tailwind is built with.

Next, create a postcss.config.js in your project root file. This is the configuration for the PostCSS module and will be used by Parcel during the build. Also, if the NODE_ENV is set to production, we use the prugecss module to compress and have the classes we use in our markup. This process drastically reduces the final CSS file. This config is enough for us to get started. If you want to customize Tailwind refer to this page.

Usage in Markup

In our HTML markup file, let’s include a CSS file. You’ll notice that the extension is .pcss. This indicates to Parcel Bundler to process that file with the PostCSS module. This file extension will be renamed to .css during the build process.

In your app.pcss file, include these three lines. These include Tailwinds CSS classes. You can write normal CSS below these lines, which will also be included in the build output.

Conclusion

Tailwind has been growing on me. I am just getting used to its paradigm, but I can see myself using it in my future work. That’s about it, if you face any issues with this configuration, please comment, I will try to help.

That’s all for now. This has been Adi.
If you need a Freelance Developer with Laravel knowledge you can contact me.

Thanks for reading.

Further Reading

• Pure CSS Slide-Down Animation.
• Redesigning a Website Using CSS Grid and Flexbox.
• Core CSS: Part II.