Getting Started with TailwindCSS and Gulp Workflow
Tags: tailwindcss, gulp, javascript, sass
Published: 2020-11-08 14:39:30

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](https://github.com/manjumjn/gulp-with-tailwindcss/commit/66768cea7db94f0599f72d8618010db36b2163d7#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R55), 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](https://github.com/manjumjn/gulp-with-tailwindcss/) 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
```

<hr>
## Usage

There are two commands you can use, one is for development which will use [browsersync](https://browsersync.io/) 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
```

<hr>
### 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

<hr>
## 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.

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


{% github manjumjn/gulp-with-tailwindcss no-readme %}