It's pretty straight forward to setup Tailwind and give it a test spin using the CDN version. However, as mentioned on the Tailwind site, you need to setup Tailwind using npm in order to start customising Tailwind.

This guide will help beginners get to grasp with:

Huge thanks to https://flaviocopes.com/tailwind-setup/ for the excellent setup guide which helped create the starter template.

Setup Node.js/npm

---

Download and install Node.js/npm

Download Node.js + npm

Open your node command prompt/terminal and check if you have Node.js / npm installed:

node -v and then npm -v

Update your npm:

npm install -g npm

Tailwind-Starter Setup

---

Create your 'project-name' folder and download the Tailwind-Starter zip file and extract the contents.

Download Tailwind-Starter (zip)

Open package.json and then edit the follow section of the file to match your project

Refer to https://docs.npmjs.com/files/package.json for guidance

Open your node command prompt/terminal and navigate to your 'project-name' folder and create the `node_modules` directory

npm install or npm update

Refresh the Tailwind.js file

npm run del:js && npm run create:js

Create the initial css file

npm run dev:css

Start building your website using the starter template in the dist folder.

Customising Tailwind

---

Customise tailwind.config.js

To make changes to the configuration, go to your 'project-name' folder and open tailwind.config.js and make amendments for your website (e.g. update the colour palette, fonts etc).

Refer to the Tailwind documentation for more information: Configure tailwind.js

Example: Adding two new colour classes 'primary' and 'secondary'

Customise tailwind.config.css

As your development goes on and you start getting a lot of repetition of CSS classes, you can create your own utilities and components

Refer to the Tailwind documentation for more information: Add new Utilities and Extract Components

Example: Creating a component class for a button

This will allow you to setup a button using:
<a href="#" class="btn">Click Me!</a> instead of
<a href="#" class="bg-brand text-white text-sm border-none rounded font-bold p-3 mt-2 hover:bg-teal-dark">Click Me!</a>

Updating tailwind.css for your project

After any changes to tailwind.config.js and tailwind.css, you must recreate the tailwind css file in order to get the updated classes/utilities for use in your project.

Open your node command prompt/terminal run:

npm run dev:css

Create purged and minified css

---

Once you have finalised your project you can build the final minified version (tailwind.min.css in the /dist/css folder) which will remove all of the classes which you have not used within your project.

Open your node command prompt/terminal run:

npm run build:css