Tailwind CSS and Parcel
Tags: tailwindcss, tutorial, webdev, javascript
Published: 2021-06-19 17:16:30

TLDR: A sample repo: {% github vishnup95/parcel-tailwind-example no-readme %}


## Tailwind CSS 

Tailwind CSS is a utility class CSS framework. It recieves a lot of hate and a lot of love from the frontend world.  If you are not familiar with Tailwind a quick introduction would be that it aims to help you develop UI component while staying in your HTML. It provides the developer with a list of classes that they can add to the HTML elements to style it as they wish. 

Tailwind is all about adding classes. Your HTML will end up with a lot of classes. If you don't like that I think you should look away. If it still interests you, like it does to me, I would interest in Tailwind CSS 2.1. The new version has added support for **JIT(Just in Time)**. This just eases the pain of using Tailwind in development. See, Tailwind always had a problem of having a bad development experience for me. It was large and it was so chunky that browsers would sometimes would crash(**sometimes**). JIT fixes a lot of that. It writes the CSS files according to your needs and classes added. Please read more [here](https://tailwindcss.com/docs/just-in-time-mode).

## Parcel

Parcel is web application bundler. You may be more familiar with tools like Webpack. Parcel is just faster and leaner. I would use Parcel for a smaller project.  Parcel is also working on a new v2 that is super exciting. JS compilation using Rust that is faster. Treeshaking CSS Modules. Lazy development builds. I thought I would give it a try with Tailwind CSS. Read more [here](https://v2.parceljs.org/).

## PostCSS

PostCSS is a tool that transforms CSS using JS. Tailwind uses this under the hood. Setting up tailwind requires a little bit of see through to the PostCSS world and some plugins. Don't worry. It's not overwhelming. We will walk through the steps. Read more [here](https://github.com/postcss/postcss)

### Let's start!

Let's use Yarn as a package manager. Start with initializing a yarn project. Feel free to use npm and step through. 

`yarn init` or if using npm `npm init -y`

Let's add the dependencies.

`yarn add -D tailwindcss@latest postcss parcel@next` 
 or the equivalent 


Cool. That's a lot of it done. Let's start by definining a project structure. I placed all my files inside a `src` folder. Feel free to follow along. 

Let's create a `index.html` and `style.css` in the src folder. Let's also create a folder called `assets` and add a `tailwind` folder. Leave it emplty for now.

![Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3bstkygafgubelndeco.png)
> Ignore tailwind.css for now

Okay, now we need to work on the configs.Two configs we need to care about. PostCSS config `.postcssrc` (Parcel recommends for caching) and `tailwind.config.js`(Optional. Very nice to have in large projects)

Create both files on the project root. Edit `tailwind.config.js` as 
```
module.exports = {
  mode: "jit",
  purge: ["./src/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {},
  variants: {},
  plugins: [],
};
```
Small Explanation: mode: "jit" to enable the JIT Feature. Purge to remove unused CSS. Works using PurgeCSS. Leave the rest there for now. Do look into tailwind config in detail on the docs if you are interested. 

Now onto `.postcssrc`. I would like to install a few PostCSS plugins first

`yarn add -D cssnano autoprefixer@latest postcss-import`.

cssnano is to minify CSS. Autoprefixer for vendor prefix magic and postcss-import to import css files (Not truly needed. Just nice to be aware!)

```
//.postcssrc
{
  "plugins": {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    "tailwindcss": {},
    "autoprefixer": {},
    "cssnano": {}
  }
}
```
The `tailwindcss/nesting` plugin helps us write nested scss in css files. Weird times we live in!

### Okay, enough with the config. Let's write some styles. 

I understand you are impatient. We need two more things before it all stiches together. A script runner and a script

`yarn add -D npm-run-all`

`npm-run-all` helps to run multiple scripts in parellel, series, use glob like pattern matching and more. Read more [npm-run-all](https://www.npmjs.com/package/npm-run-all)  

Then in your `package.json` you can add new scripts as: 

```
 "start": "npm-run-all --parallel 'watch:*'",

 "watch:start": "parcel serve src/index.html",
 "watch:css": "tailwindcss -i src/style.css -o src/assets/tailwind/tailwind.css -w"
```

That should be the setup done. Phew! BTW we are using `tailwindcli` to watch for the changes and compile into a new file (tailwind.css).This is the CSS file you will need in the end. Make sure you link this as a stylesheet in your HTML.

`<link rel="stylesheet href="PATH_TO_CSS"> `

Go ahead and run `yarn start` or `npm start`. I would also add a couple of helpers to our `style.css` at this point. 

```
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

```
You can go ahead and start adding classes to your HTML now. Let us start by adding a text and seeing the changes.

```
<p class="text-2xl font-bold text-center my-4"> Parcel and Tailwind says hello!</p>
``` 
Play around with with the Tailwind CSS Docs. Look at the CSS file size.  If you are using vscode the ext `bradlc.vscode-tailwindcss` is really useful. 

As an additional exercise you could add a build script and deploy your site to Netlify or gh-pages. 

Do let me know if you know if you are stuck somewhere. Suggestions are also always welcome. I am quite new to all this too!

Hope you learned something new!