I use the following boilerplate these days which is strictly based on TailwindCSS https://github.com/tomaszbujnowicz/laravel-mix-tailwindcss-purgecss

Hybrid Utility ITCSS - Front-end Boilerplate

? ITCSS Architecture + CSS Utilities + Gulp 4 + Webpack 4 + Babel + Live Reload + Twig.js

These tools make it a solid front-end boilerplate to get a new project off the ground. Based on best pieces from Bootstrap, Tailwind CSS and years of experience.

:gift: Features

Usage

Requirements

Make sure all dependencies have been installed before moving on:

• yarn or npm
• Node.js >= 8.16.0
• Gulp

Quick start: Installation

Clone this repository and run

• yarn or npm install to install dependencies

Tasks

Structure

|--dist/                   # →  Static version of the website ready to upload (never edit)
|
|--gulpfile.babel.js/      # →  Gulpfile config and tasks
|--node_modules/           # →  Node.js packages (never edit)
|
|--src/                    # →  Source files
|  |--assets/              # →  Assets
|  |  |--fonts/            # →  Assets: Fonts
|  |  |--img/              # →  Assets: Images
|
|  |--scripts/             # →  JS
|  |  |--components/       # →  Components
|  |  |--utils/            # →  Utils
|  |  |--app.js            # →  Main file
|
|  |--styles/              # →  Styles: ITCSS Architecture + CSS Utilities
|  |  |--1-settings/       # →  Settings
|  |  |--2-tools/          # →  Tools
|  |  |--3-generic/        # →  Generic
|  |  |--4-elements/       # →  Elements
|  |  |--5-objects/        # →  Objects
|  |  |--6-components/     # →  Components
|  |  |--7-modules/        # →  Modules
|  |  |--8-utilities/      # →  Utilities
|  |  |--main.scss         # →  Main file
|
|  |--templates/           # →  Templates (Twig.js)
|  |  |--layouts/          # →  Layouts
|  |  |--components/       # →  Components
|  |  |--pages/            # →  Pages
|
|--.babelrc                # →  Babel presets
|--.browserslistrc         # →  Browserslist config, browsers that we support
|--.eslintrc               # →  ESLint config
|--.gitignore              # →  Gitignore
|--.stylelintrc            # →  Stylelint config
|--package-lock.json       # →  NPM lock file (never edit)
|--package.json            # →  Node.js dependencies and scripts
|--webpack.config.js       # →  Webpack config
|--yarn.lock               # →  Yarn lock file (never edit)

Copyright and license

Copyright 2019 Tomasz Bujnowicz under the MIT license.