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

6 min readJan 26, 2022

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 State Of CSS, the annual 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

Being utility-first is the approach of Tailwind CSS’s framework. 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. Using these classes makes it easy to customize your own design without much difficulty. 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. The problem, however, is that installing Tailwind can be quite 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 so useful for building modern, responsive sites quickly, the size of the CSS file in development build isn’t exactly small — it actually totals 180k+ lines of code. Yikes. The size easily ranges from 3–5 MB even with just a few plugins, colors, and variants added. The verdict lies in the fact Tailwind CSS’s development build includes all the different permutations of classes you may need, even though your project probably requires significantly fewer classes.

Although a big CSS file in development doesn’t feel like a dealbreaker, the effects are negatively felt when using the Inspector/debugger. In fact, the browser would start to lag like crazy, which isn’t just annoying, but actually a factor that can delay your progress and affect your momentum. To simply refresh the page would require an inordinately long time. These factors understandably contribute to why people would 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. To put it simply, It’s similar to the convenience of being able to instantly check out the photo right after taking it, just like in the picture above.

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

Step-by-Step Guide To Setting Up (10 Steps)

Step 1: Create a new project by running this command

$ mkdir tailwind-latest

Step 2: Go into the project by running $ cd tailwind-latest and then open with your editor of choice (I recommend VSCode)

Step 3: 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.jsonfile

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

Step 5: Create a new folder called css and inside it create a styles.css file. This is where you will insert the Tailwind directives so that the CSS can be generated from the Tailwind components.

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

Step 5: Create a new folder called dist and also create your index.html inside it. Also, add some Tailwind classes here to be checked later with Live Server.

<!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>

Step 6: To enable JIT, the configuration file of Tailwind CSS is needed. To generate this as well as the Postcss config files automatically, run $ npx tailwindcss init -p

Step 7: Add ‘jit’ to mode, and also add $ './dist/**/*.html' to ensure that only the utility classes that are being declared in your HTML file are being compiled.

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

Step 8: In order for the Tailwind CSS to be compiled, go to your package.json and paste this into “scripts.” These custom scripts utilize concurrently, an npm package that allows multiple scripts to be run simultaneously.

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

In the same manner, running $ npm run start-prod is used when the app is ready for production. It triggers $ npm run prod to ensure the environment is production, as well as $ npm run css-prod to trigger Postcss for when the web app is ready to go into production.

"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"
  },

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 are being applied instantly, and this is due to JIT (Just-In-Time) mode being active.

Step 10: Now that everything is working, the last thing to do is to run $ npm install -D cssnano so that the file is minified in production. Then go to postcss.config.js and insert this code:

module.exports = (ctx) => ({plugins: {tailwindcss: {},autoprefixer: {},cssnano: ctx.env === 'production' ? {} : false},})

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

Conclusion

And there you have it! In just 10 steps, you now know how to efficiently configure Tailwind with JIT mode enabled for vanilla JS projects. On top of this, this set-up is optimized for coding both in development and production, also giving 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, then please feel free to simply clone this repo. And if this was of any use, please do feel free to give it a star!