Set Up Tailwind CSS with CLI

Working with Tailwind via our CLI

Written By Luke Wakefield

Last updated 5 days ago

Before You Start

You must already have a Site with SiteBuilder installed and have our CLI installed

Introduction

If you don't have the Siteglide CLI installed or need help with the CLI follow our Quickstart guide:

quickstart.md

Using the Command Line Interface (CLI) to build a Tailwind CSS file allows you to:

  • Use the latest versions of TailwindCSS and its various 1st and 3rd party plugins.

  • Get the best performance front-end as Tailwind can scan your entire codebase to carry out "tree-shaking" to only include utility classes you actually need

  • Faster development performance as you can rebuild your CSS faster, and therefore build things faster

Each time you start working on a new project, you will need to follow these steps, however, the setup time is worth it as it will give you a much smoother experience going forward.

Step by Step Guide

Step-by-step guide to setting up Tailwind via CLI{% endembed %}

Step 1) Check Your SiteBuilder Tailwind Settings are Set to CLI Build

Older versions of SiteBuilder would have defaulted to use the JIT option as a default. Make sure it's set to CLI!

Use this command to build your Tailwind's CSS (we'll look at this in more detail in a minute):

Example
npm run tailwind

In the other terminal window, use this command to sync changes to the Site with Siteglide-CLI (replace <env> with your environment name from step 2):

Example
siteglide-cli sync <env>

Both commands will keep running indefinately and will watch your files for changes. Every time you change a Liquid file the Tailwind will re-compile the CSS if it needs to!

You can now start building your Site using Tailwind CSS!

Next

Head to the next article to understand in more depth:

  • The Tailwind Config File

  • The Tailwind source CSS file

  • The Tailwind distributable CSS file

Editing Tailwind CSS using the recommended CLI method