How to Setup Tailwind CSS With Parcel Bundler
Join the DZone community and get the full member experience.Join For Free
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.
You may also like: Utility-First CSS With Tailwind
First, let’s add the new dev dependencies to your
package.json file. You need
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.
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.
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.
Published at DZone with permission of Adi Sk. See the original article here.
Opinions expressed by DZone contributors are their own.