Configure Tailwind CSS for Vanilla JS with JIT in 10 Easy Steps

The Rise of Tailwind CSS

According to its website, Tailwind is a CSS framework that lets you "rapidly build modern websites without ever leaving your HTML." Judging by the number of stars on GitHub, it's clear that Tailwind's popularity has been soaring. In fact, Tailwind took the first spot in Best of JS' Rising Stars of CSS Frameworks in 2020.

The annual State Of CSS survey about the latest trends in CSS highlights just how pleased developers are with the framework.

“Tailwind CSS stands out as one of the tools with the highest satisfaction ratio (86%), as defined by the number of developers who have used Tailwind CSS and are willing to use it again.”

The Tailwind approach

The Tailwind CSS framework takes a utility-first approach. Compared to other frameworks like Bootstrap, Bulma, or Materialize, it isn't opinionated and doesn't have ready-made components. Tailwind CSS instead makes it easy to create your own design with the aid of utility classes. These classes help you easily customize your own design. Best of all, Tailwind CSS gives you the freedom and creativity to go with your own unique style and approach to utilizing your CSS.

With all that said, it makes perfect sense to be excited to use this new technology. So, what’s the problem?

Installing Tailwind can be tricky, especially when considering all the different steps, pre-requisites, and elements involved. After scouring through various tutorials, I've finally learned the best way to set up Tailwind CSS with JIT mode (Just-In-Time compilation) for vanilla JS projects.

Why you should enable JIT mode

While Tailwind CSS is useful for building modern, responsive sites quickly, the CSS file size in development build isn't exactly small — it actually totals 180k+ lines of code! The size ranges from 3 to 5MB with just a few plugins, colors, and variants added.

Why is the file so big? Tailwind CSS's development build includes all kinds of classes you may need, even though your project probably doesn’t require every single one of these classes.

Although a big CSS file in development doesn't feel like a dealbreaker, you will feel the negative effects when using the Inspector/debugger. In fact, the browser can even start to lag like crazy, which isn't just annoying but actually delays your progress and affect your momentum. Refreshing the page would take an inordinately long time. These factors understandably contribute to why some people want to stop using Tailwind.

This is where JIT mode comes in. It makes using Tailwind in development a breeze, with instant changes being reflected. Simply put, it's similar to the convenience of instantly checking out the photo right after taking it on your phone, just like in the picture above. 

Below is a complete step-by-step process on how to install Tailwind with this configuration.

A step-by-step guide to setting it up in 10 easy steps

Step 1: Create a new project by running this command.

{% code-block language="js" %}
$ mkdir tailwind-latest
{% code-block-end %}

Then, go into the project by running  $ cd tailwind-latest  and then open with your editor of choice. I recommend VSCode because it has a lightning-fast source code editor, supports hundreds of languages, and has thousands of useful extensions that are easily accessible.

Step 2: Make sure to install npm.

Then run  $ npm init y  to initialize as a JavaScript project with all the default options, as well as default metadata generated in your package.json file.

Step 3: Run the below. 

$ npm install -D tailwindcss@latest autoprefixer postcss-cli@latest  to add these to your dev dependencies in your package.json file.

Step 4: Create a new folder called css and, inside it, create a styles.css file.

This is where you will insert the Tailwind directives to generate the CSS from the Tailwind components. 

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

Step 5: Create a new folder called dist, and create your index.html inside it.

Also, add some Tailwind utility classes here like “text-4xl” for h1 to be checked later with Live Server. This is how it should look. 

{% code-block language="js" %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS Template</title>
    <link rel="stylesheet" href="../src/styles.css" />
  </head>
  <body class="mx-auto h-full w-full bg-blue-300">
    <h1
      class="
        p-24
        text-center
        justify-center
        items-center
        text-4xl
        font-bold font-mono
        text-white
      "
  >
      This template is pre-configured with Tailwind CSS and contains the basic
      structure for a project requiring vanilla JS.
    </h1>
  </body>
</html>
{% code-block-end %}

Step 6: To enable JIT, you need the configuration file of Tailwind CSS.

To generate this and the Postcss config files automatically, run  $ npx tailwindcss init -p .

Step 7: Add  'jit' to mode.

Also add  $ './dist/**/*.html' to ensure that only the utility classes declared in your HTML file are being compiled.

{% code-block language="js" %}
console.log(process.env.NODE_ENV);
module.exports = {
  mode: 'jit',
  purge: [
    './dist/**/*.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
{% code-block-end %}

Step 8: To compile the Tailwind CSS, go to your package.json and paste this into "scripts."

These custom scripts that I wrote, utilize concurrently, an npm package that allows multiple scripts to run at the same time. In this case, we are running both Webpack and Postcss simultaneously.

In the first instance, running  $ npm run start-dev would trigger  $ npm run dev to call Webpack to run in the development environment. It would also trigger  $ npm css-dev  to make sure Tailwind is being watched, with the compiled styles outputted in  src/styles.css .

In the same manner, run  $ npm run start-prod  when the app is ready for production. It triggers  $ npm run prod  to ensure that the environment is set to production mode and  $ npm run css-prod to trigger Postcss compilation with the final classes being utilized.

{% code-block language="js" %}
"scripts": {
    "start-dev": "concurrently \"npm run dev\" \"npm run css-dev\"",
    "start-prod": "concurrently \"npm run prod\" \"npm run css-prod\"",
    "css-dev": "TAILWIND_MODE=watch postcss css/styles.css -o src/styles.css -w --verbose",
    "css-prod": "NODE_ENV=production postcss css/styles.css -o src/styles.css",
    "dev": "npx webpack -w --config webpack.config.js --mode development",
    "prod": "npx webpack -w --config webpack.config.js --env production"
  },
{% code-block-end %}

Step 9: With the script running, check Live Server to see the Tailwind classes being applied.

As you experiment by adding and removing classes, you will notice that the changes reflect instantly. This is due to JIT (Just-In-Time) mode being enabled.

Step 10: The last step is to run $ npm install -D cssnano so that the file is minified in production.

We minify the file to remove unnecessary characters in the source code to reduce the file size and facilitate faster loading of the site. Then, go to postcss.config.js and insert this code:

{% code-block language="js" %}
module.exports = (ctx) => ({
plugins: {
tailwindcss: {},
autoprefixer: {},
cssnano: ctx.env === 'production' ? {} : false
},
})
{% code-block-end %}

With this code, you are essentially passing and using the context to check the context's environment. This means that when you change your run build from  $ npm run start-dev  to  $ npm run start-prod , the CSS file gets minified in production.

Conclusion

There you have it! In just 10 steps, you now know how to efficiently configure Tailwind with JIT mode enabled for your vanilla JS project. On top of this, this setup is optimized for coding both in development and production. It gives you the flexibility to simultaneously run Webpack and Postcss scripts via the npm package, concurrently.

If you'd like to use this template right off the bat, feel free to clone this repo. And if this repo helped with your Tailwind set-up, please feel free to give it a star!