ποΈSet Up Tailwind CSS with the recommended CLI method
Working with Tailwind via our CLI
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:
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 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!
Step 2) Set up Project Folder in a Code Editor and Connect it with your Siteglide Site Using Siteglide CLI
You will need to install Siteglide CLI- if you haven't or are not sure if you have, head here first:
Next you'll need to follow the steps to create a project folder for your new Site and setup Siteglide CLI for this new Site:
Once you've pulled the Codebase for the new Site down into your project folder, continue to the next step.
Step 5) Move the Tailwind Files to the Correct Folders
We'll be using npm (Node Package Manager) to install the software and settings we need to run Tailwind on your machine. This is the same tool you will have used to install the Siteglide-CLI.
We've built files in the Site Template which contain the instructions npm needs to set you up automatically.
Find the files in the folder:
And copy and paste these two files package.json
and package-lock.json
into the root project folder (next to- but not inside - marketplace_builder).
Next, move the tailwind.config.js
and tailwind.css
files from the copy_and_paste_my_files_into_the_src_folder
folder to the marketplace_builder/assets/modules/module_86/src folder
:
Step 6) Use NPM to Automatically Install Dependencies
Using your integrated terminal from step 2, which is already open in your project directory, run the command:
You may be given some warnings and information by npm at this stage. For the sake of this tutorial most are safe to ignore for now and come back to later.
Step 7) Run Commands to Build your tailwind.min.css File and Sync it
Split your terminal in two. We'll need one window to build our Tailwind CSS and a second one to sync our changes to the Site:\
Use this command to build your Tailwind's CSS (we'll look at this in more detail in a minute):
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):
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
Last updated