Tailwind CSS: Getting Set Up in Minutes

Tailwind CSS is a great CSS framework. Utility first, fully customizable and just a pleasure to use.

I had been seeing it around and wanted to try it myself, however the set up instructions can feel a bit tedious, especially if you’re not familiar with all the front-end build tools and CSS preprocessors.

So, after going through it myself, I decided to write a guide on the fastest way to set up Tailwind CSS.

Prerequisites

Node

NPM

Assumptions

You are familiar with working from the command line

All commands are run from the root of the project

Our main CSS file is at src/css/app.css

We want our compiled file to be at build/css/app.css

Step 1: Install Laravel Mix

Laravel Mix is a great tool that greatly simplifies webpack configuration. I have written a previous article on it here.