# Configure Tailwind JIT for a node express app
In this article, we will be adding the amazing [Tailwind JIT feature](https://daily-dev-tips.com/posts/why-tailwind-jit-compiler-is-amazing/) to a Node Express app.
We'll focus on the complete setup from A-Z, but if you want more details on a Node express setup, check out my previous article on a [basic node express app](https://daily-dev-tips.com/posts/basic-nodejs-express-application/).
## Setting up the node express project
Let's start with step one, creating the project and adding all the dependencies.
I'll be using the terminal for these commands, but feel free to create them by hand.
First, let's create a folder and navigate to this folder.
```bash
mkdir node-express-tailwind && cd node-express-tailwind
```
Once we are inside this folder, let's use `npm` to initialize a new project.
```bash
npm init -y
```
While we are at it, let's add the dependencies we need:
```bash
npm i express tailwindcss
```
We'll also need the postcss CLI globally installed:
```bash
npm install -g postcss-cli
```
## Basic express application
Now let's go ahead and create the basic express application that can serve an HTML file.
Create a file called `server.js` inside this server place the following code:
```js
const express = require('express');
const port = 8000;
const app = express();
app.use(express.static('public'));
app.listen(port, console.log(`Server started on ${port}`));
```
As you can see, we defined our public folder, so go ahead and create a folder called `public` at the root of your project.
Create an `index.html` file inside and put some basic HTML inside to test it works.
```html
Express website
Hello world! 👋
```
Now let's modify our `package.json` so it will run this script on start.
```json
"scripts": {
"start": "node server"
},
```
Then in your terminal run, `npm start` and your website should spool up.
Visit `http://localhost:8000` to view your website.
## Adding Tailwind to the mix
Now it's time for the fun part, adding Tailwind to the mix.
We'll start with the basics and move to JIT in a bit.
Since we already installed Tailwind as a dependency, we can initialize a Tailwind config file.
```bash
npx tailwindcss init
```
This will create a basic `tailwind.config.js` file.
Next, head over to your `public` folder and create a folder called `styles`. Inside that folder, create a file called `tailwind.css`.
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Now we need a way to compile this CSS into a usable file.
For this, we need PostCSS.
Create a file called `postcss.config.js` in your root project.
```js
module.exports = {
plugins: [require('tailwindcss'), require('autoprefixer')],
};
```
And lastly, we need a way to run a compile command.
Open your `package.json` and add the following script:
```json
"scripts": {
"tailwind:css": "postcss public/styles/tailwind.css -o public/styles/style.css",
"start": "npm run tailwind:css && node server"
},
```
Now, if we run our `npm start` command, we will first run the tailwind command. This will compile the tailwind css into a `style.css` file.
We can then go ahead and use this in our HTML file:
```html
```
Let's also add some basic HTML, to see if Tailwind is loading:
```html
Deadpool
```
You might have spotted. I'm using some JIT code right there.
The part that states `pb-[200%]` is JIT code to compile to:
```css
padding-bottom: 200%'
```
But that won't work right now. However, the rest of the code will compile and give us a basic Tailwind card!
## Enable Tailwind JIT compiler in a Node express app
So how do we make sure this JIT compiler works?
Head over to your `tailwind.config.js` file and change/add the following rules:
```js
module.exports = {
mode: 'jit',
purge: ['./public/*.html'],
};
```
Wait, that's it?
YEP!
Refresh your website and be amazed:
And just like Deadpool, we absolutely love how easy it is to get a basic Node express app with Tailwind JIT setup!
You can find the full code example on the following [GitHub repo](https://github.com/rebelchris/node-express-tailwind).
### Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
