https://github.com/tomaszbujnowicz/laravel-mix-tailwindcss-purgecss
I use the following boilerplate these days which is strictly based on TailwindCSSHybrid 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.
π Features
Features | Description |
---|---|
Task Runner | Gulp |
CSS | SASS, ITCSS, CSS Guidelines |
CSS Tools | Autoprefixer, Source Maps, Stylelint |
JS | Webpack, Babel, ESLint |
Live Reload | BrowserSync |
HTML Templates | Twig.js |
Deployment | GitHub Pages |
Usage
Requirements
Make sure all dependencies have been installed before moving on:
Quick start: Installation
Clone this repository and run
yarn
ornpm install
to install dependencies
Tasks
Task Name | Description | Environment |
---|---|---|
yarn start or npm run start |
Generate a development environment, start the server and watch for changes | Development |
yarn watch or npm run watch |
Start the server and watch for changes | Development |
yarn build or npm run build |
Compile production code | Production |
yarn deploy or npm run deploy |
Compile production code and deploy to GitHub Pages | Production |
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.