Webpack Tailwind Starter

A starter frontend boilerplate using Webpack 5, TailwindCSS, SASS, PostCSS, Babel, ESLint, Stylelint, Prettier and more.

Features

Webpack

• Latest Webpack 5.
• Separated Webpack configurations per environment: development or production.
• Fully configured Webpack Dev Server for local development with Hot Module Replacement enabled.
• HTML file to serve your webpack bundles with html-webpack-plugin.
• Copy files to build directory with copy-webpack-plugin.
• Load environment variables from a .env file with dotenv-webpack.
• Analyze output files with an interactive zoomable treemap with Webpack Bundle Analyzer.

Babel

• Babel 7 - JavaScript compiler with babel-preset-env.

TailwindCSS / SASS / PostCSS

• @tailwindcss/typography - A plugin that adds a set of prose classes that can be used to quickly add sensible typographic styles to content blocks.
• @tailwindcss/forms - A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
• SASS support based on dart-sass.
• PostCSS setup with post-preset-env, including autoprefixing of browserspecific CSS rules.

Code style & linters

• JavaScript Linting with eslint.
• Style Linting with stylelint: stylelint-config-standard-scss, stylelint-config-recess-order.
• Automatic code formatting with Prettier.

Optimization

• Image optimisation - optimize jpeg, jpg, png, gif, svg filesize with imagemin.
• Optimize and minimize CSS assets with CssMinimizerWebpackPlugin.

Additional tools

• Configurable browsers versions support via browserslist.
• Git hooks with Husky.
• Lint commit messages with Commitlint.
• Run linters against staged git files with lint-staged.

Usage

Development server

npm start

Runs the app in the development mode with hot reloading enabled.
Open http://localhost:8080 or server port specified in your .env file to view it in your browser.

Production build

npm run build

Builds the app for production to the dist folder.
The build is minified and the filenames include hashes.

Code style linters

npm run lint

Runs both SASS and Javascript code linters.

SASS

npm run css-lint

Javascript

npm run js-lint

Code formatting

npm run prettier:format

Runs code formatting with Prettier.

Bundle analyzer

npm run analyze

Builds the app for production and creates an interactive treemap visualization of the contents of all your bundles.
It will start an HTTP server on the default configuration URL localhost:8888 to show bundle report.

Requirements

• node: >=18
• npm: >=8