Gulp with TailwindCSS v3

Introduction

A tailwindcss stater kit with which you can quickly set up a development environment and focus on building responsive and modern websites without worrying about configuration and optimization details.

Features

Easy configuration using config.js
Live reload on file/assets changes using browser-sync
SCSS support with auto purge css
Minification of styles and scripts on production build
Minification of images on production build using imagemin
Includes following tailwindcss plugins (can be disabled/enabled with config.js)

@tailwindcss/forms
@tailwindcss/line-clamp - Utility included by default in Tailwind v3.3 release
@tailwindcss/typography
@tailwindcss/container-queries

Quick Start

You can get started by clicking on Use this template for creating new repo using this template or simply by cloning it.

Install dev dependencies

yarn install

Start development server with live preview

yarn dev

Generate build files for production server

yarn build

Getting Started

All dev files are present in src folder. The build version can be found on build folder after running yarn build command.


├── src (folder)
│   ├── components
│   ├── css
│   ├── img
│   ├── js
│   ├── index.html
├── config.js
├── dist (folder)
├── build (folder)
├── gulpfile.js
└── tailwind.config.js

Configuration

All configurations are found in config.js file in root directory. You can configure browser default port, enable/disable plugins by simply updating boolean values (Default is set to true) and many more.

const config = {
  tailwindjs: "./tailwind.config.js",
  port: 9050, // default port
  // purgecss options
  purgecss: { 
    content: ["src/**/*.{html,js,php}"],
    ...
  },
  // imagemin options for image optimizations
  imagemin: { 
    png: [0.7, 0.7], // range between min (0) and max (1) as quality - 70% with current values for png images,
    jpeg: 70, // % of compression for jpg, jpeg images
  },
};

// tailwind plugins
const plugins = {
  typography: true, // set to false to disable
  forms: true,
  containerQueries: true,
};
...

Bugs/Feedbacks

You can report bugs or give feedbacks on github

Gulp with TailwindCSS v3 Kit