Getting Started with TailwindCSS and Gulp Workflow

It's been almost 2.5 Years ago or nearly 3 years now when I came across a CSS utility Framework - TailwindCSS. It was the time when PSD to HTML or Custom Wordpress Themes was in play in most cases. I was never fan of any CSS Frameworks such as Bootstrap, Foundation etc. I always created my own set of styles keeping base styling intact (You can say my own grid system with base styling 😎 ) for all the projects I worked on.

I started using TailwindCSS when it was still in early stage, as you can see in this commit, it was v0.7 version of TailwindCSS. I used Gulp those days for my development workflow that's when I created this StarterKit for TailwindCSS with Gulp Workflow.

Today I'm here to share this workflow with all of you, which I recently updated as Gulp and TailwindCSS has come a long way since then. So Let's get started. 🤟

Getting Started

Step 1: Simply download the zip file from github by clicking here or if you are a command line person simply clone the repo.

$ git clone https://github.com/manjumjn/gulp-with-tailwindcss.git

Note: Make sure you have NodeJS and Git Installed in your system before proceeding.

Step 2: Install all necessary packages.

$ npm install

---

Usage

There are two commands you can use, one is for development which will use browsersync for the live preview that reloads on changes made to the files and the other is for production build which builds optimized and minified files for production sites.

$ npm run dev // for development

$ npm run prod // for production

---

Files Structure

|-- Folder
    |-- config.js
    |-- gulpfile.js
    |-- tailwind.config.js
    |-- src
        |-- index.html
        |-- css
        |   |-- a.tailwind.scss
        |   |-- main.scss
        |-- img
        |   |-- cover.jpg
        |-- js
            |-- main.js
            |-- external
            |   |-- external.js
            |-- libs
                |-- library.js

As you can see in the folder structure there is are

• config.js - Configuration file used in gulp which can be used to change directory names and port of browsersync
• tailwind.config.js - for TailwindCSS configuration
• js > external - the files in this folder will be excluded in compiling for minification/concatination

---

Few Tips to keep in mind

• Use prefixes in file name for reordering the concatenation of files as gulp uses alphabetic order in concatenation. The same reason the tailwind.scss is named as a.tailwind.scss. Same goes with js files naming as well.
• When using tailwindCss@apply property in scss make sure to end the line with semi colon, if missed the next lines will be ignored.

---

I'll be updating this article with more information and updates. You can follow the repo for the same or to raise issues.

---

lazymozek / gulp-with-tailwindcss

Gulp with TailwindCSS Starter Kit