In this article, you will learn how to use TailwindCSS with Node.js, Express, and Pug. The purpose of this tutorial is to teach you how to create a Node.js application with TailwindCSS, Express, and Pug.
- Basic terminal knowledge.
- Knowing how to use a code editor.
- Basic npm/npx/yarn knowledge.
- Pug and Express.js knowledge.
The first step is to create and configure our application. Run the following commands to create an empty directory nodejs-tailwind, and change the current directory to it:
Now that we are in the nodejs-tailwind directory, we have to initialize our Node project. To do so, we need to run the following command:
For each Node.js project, we need a file called package.json. Its purpose is to store metadata about the project (e.g. name, description, version, author, etc.), and to manage the project dependencies and scripts. We could create the file manually, but that would be tedious.
Thus, the purpose of npm init is to create the package.json file. Once you run the command, you get an interactive prompt where you can add information about your project. Or, if you are happy with the suggested information, you can press enter until the end. If you do not add any information, your file should look like this:
Now we need to create the index.js, which stores our basic server. You can create the file by running:
Create basic server
There are various Node.js frameworks to create a server. However, for this tutorial, we use Express because it is a mature, well-known web framework. We install Express in your project as follows:
If you go to package.json, you can see "express" listed under dependencies. That means we are ready to build the server and test it in the browser.
Now make sure the server works. You can check it by running node index.js in your terminal, and then visiting localhost:3000. If you did everything correctly, you should see a page that says "It works".
Before adding TailwindCSS to our project, we should install Pug. Pug is a template engine for Node, which has a simplified syntax and it compiles to HTML. It makes it easier to write HTML code, and cleaner too.
The first step is to install Pug in our project. We can install it by running the command below:
Once Pug is installed, we need to create a new directory to store the pug files. You can create a new directory, and a pug file, as follows:
After creating the index.pug file, add the following content to your file:
The tutorial assumes Pug knowledge. However, if you wish to see the same code in HTML format, you can use the Pug to HTML converter. It's a useful tool if you want to convert your code between Pug and HTML, or vice versa.
Configure views and static files
Before we can start coding, we have to set up views and static files. The first step is to import the path module, which comes with Node.js by default. The path module allows us to work with directories and file paths, which we need when we serve static assets such as images, for instance.
Thus, import the path module, as in the line above. Now, let's see what the code below does.
With the first line, app.set('views', path.join(__dirname, 'views'));, we tell Node.js what the source of our templates is. Now, Node.js knows where to look for our pug templates.
Going further, the second line - app.set('view engine', 'pug'); - tells Node.js what engine to use. In our case, it is Pug.
We need to update our server to serve the pug file we created previously. To do that, change res.send('It works'); to res.render('index'); in the app.get function. Your "get" route should look like the one below:
Run the server to make sure the changes did not break our application. Going to localhost:3000, you should see:
My starter template
The step of the tutorial is to add Tailwind to our project and configure it. Let's start by adding TailwindCSS and PostCSS to our project:
Why do we need to add PostCSS and Autoprefixer as well? First of all, PostCSS allows us to "convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments". But why do we need it for Tailwind? The reason is that TailwindCSS is a PostCSS plugin. As a result, we need a tool to translate the modern CSS into something the browsers can understand.
Secondly, autoprefixer is a PostCSS plugin as well. Autoprefixer adds vendor prefixes to CSS rules using the values from Can I Use. In other words, it makes sure the application looks the same in all browsers.
Let's move further, and generate the tailwind.config.js file. The purpose of this file is to allow you to customize your TailwindCSS installation. It is a configuration file where you can add additional information such as plugins, themes, margins, padding, and everything you require and Tailwind does not have.
By running the above command, it automatically creates the tailwind.config.js file. If you want to add customizations, I recommend checking the TailwindCSS Configuration page.
That is all it takes to add TailwindCSS to your Node.js project!
What is left, is to set up the postcss.config.js file, which stores the configuration for PostCSS. First of all, we have to create the file, which we can do as follows:
Once the file is created, add the following configuration to it:
The postcss.config.js file specifies what PostCSS plugin our project uses. In our case, it is TailwindCSS and Autoprefixer.
Create the necessary files
After adding and configuring all the packages, we need to create the files for our CSS. For this tutorial, I chose to create the folder styles inside the "public" folder. Lastly, the tailwind.css file holds the Tailwind CSS, whereas the style.css file contains the final CSS that is used by our application.
You can create the directory and the two files, by running the above commands. mkdir creates a new directory, whereas touch creates an empty file. Also, add the following code in tailwind.css:
The above code injects base, components, and utilities styles from TailwindCSS into our CSS. These directives become actual CSS at run time. After you run the command from the next section - " tailwind:css" - check the file style.css to see the generated code.
The last thing we have to do is to add the following line in our project's package.json:
With the above command, we build the CSS and add it to the styles.css file, which is used by our application. If you add CSS to your application, make sure to run npm run tailwind:css each time, so the changes apply. After doing so, start your application, and you should see the changes.
At this point, you should have a complete Node.js application with Express, Pug, and TailwindCSS. If you want to check the project, here is the GitHub link to the project. Feel free to use it as a starter for your project.
To recap, we learned how to:
- add Express, Pug, and TailwindCSS to a Node.js project.
- set up Pug as the view engine in the application.
- set up the folder for our assets.
- create a basic Node server.