Tailwind CSS and Parcel

TLDR: A sample repo:

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.

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.

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

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.

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

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!