Creating a HubSpot website with Tailwind CSS

This article was authored by a member of the HubSpot developer community, Sjardo Janssen.

Tailwind is one of the most popular frameworks at the moment. But how do you combine the flexibility of a utility-first CSS framework with HubSpot CMS? Today, we will go over the process of working locally on the HubSpot CMS with Tailwind CSS.

Tailwind is the most popular kid on the block. Loved by many as it’s flexible and easy to use. It does not matter if you have a static webpage or a complete web app, Tailwind works in almost any situation. But how does this work alongside the HubSpot CMS? Very good if I may say. In this brief article we go over installing Tailwind within your Theme, setting up a watcher and make sure it plays nicely with the HubSpot watcher. You are probably familiar with working with the HubSpot CLI. If you are not, check out the documentation.

What is TailwindCSS

Tailwind CSS is a utility-first CSS framework that provides a set of predefined classes for building user interfaces. It was created to make building complex and responsive designs easier and more efficient.

Unlike traditional CSS frameworks that offer pre-built components, Tailwind CSS provides a set of low-level utility classes that can be combined to create custom designs. These utility classes are designed to be highly composable and can be used to create almost any design style.

Tailwind CSS offers a comprehensive set of styling options, including typography, color, spacing, and layout. It also includes a built-in responsive design system that allows developers to create designs that work seamlessly across various screen sizes.

Overall, Tailwind CSS is a highly flexible and powerful tool that allows developers to create unique and highly customizable user interfaces quickly and efficiently.

How to setup TailwindCSS within a HubSpot Theme

To kick things off, you can run Tailwind through a CDN, which provides a huge CSS file with all possible classes. This is awesome to play around with for a bit, but we all know that we want to have the best possible setup. To leverage all the goodies that local development provides, we will set up Tailwind with NPM and create a solid foundation.

Step 1: Install TailwindCSS with NPM

In your terminal, move to your HubSpot theme and run npm install -D tailwindcss. This will install as a NPM package.

Step 2: Initialize the TailwindCSS configuration file

In your terminal, run to install npx tailwindcss init a tailwind configuration file. This will create a file called tailwind.config.js where we set up the configuration.

Step 3: Configure your Template Paths

If you open tailwind.config.js, copy and paste the following code:

What does it do:

Well, mostly it's all about the content line. In this line, we define the location of files that have Tailwind classes. I focus on two separate directories, "modules" and "templates," which can contain files with Tailwind classes. These directories may include HTML, CSS, and JS files with Tailwind CSS included. Every time you run Tailwind, it will search for CSS classes in files with HTML, CSS, or JS extensions within these directories. The identified classes will be outputted in a new CSS file.

Step 4: Setup a CSS file to write CSS to.

To ensure that all the Tailwind CSS is placed correctly, we set up a new CSS file. For demonstration purposes, let's create a directory called "src" at the root level, and within the "src" directory, we add an input.css file. This file will serve as the container for all the CSS and allow you to insert custom CSS according to your preferences.

Within the input.css file, add the following 3 rules:

These lines will make sure you get some goodies from the get go. You can find more information on the Tailwind Documentation website.

Step 5: Run Tailwind!

If you go to your terminal and run npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch, you can start working! Tailwind will monitor the files, and if it detects a new Tailwind class, it will generate a new output CSS file that includes all the necessary classes.

Combining HubSpot CLI with TailwindCSS.

Tailwind immediately works well with the HubSpot watcher. How it works:

1. You edit a file with new CSS classes.
2. Hubspot will detect the changes in the file and uploads the new version to the server.
3. Tailwind detects changes in the file and writes a new CSS file
4. The update to the CSS file is detected by HubSpot
5. HubSpot uploads the new file as well.

And everything is live and ready to go!

Building your first module.

With that out of the way, we can start working on a module. This goes like you did before. There is only one difference and that is that you do not need to do anything in the .css file of a module. As we write css as HTML Classes, the CSS will be build based on those Utility classes. So no more manual CSS edits.

Let's create a quick red square in the middle of the screen.

We now add TailwindCSS Utility classes to the HTML to style the div.

Try it out in the Tailwind CSS playground.

That's it! From now on, it’s just a normal module where you do everything you normally do, but with Tailwind CSS.