set-up-tailwind-css.md

Set Up Tailwind CSS with the recommended CLI method

Before You Start

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