This template is made to help start your project based on Webpack + TailwindCSS. Setup is pretty simple, while keeping best performance practices set up.
- To use this template, click "Use this template" green button in the top right.
- Clone the repository to your computer
- Install dependencies -
npm ci - Configure where your views are in tailwind.config.js.
npm start- runs dev server onhttp://localhost:8080and reloads the browser on changesnpm run build- build assets in production mode, ready to deploy
- JS and CSS transpilation and minification done by ESBuild (FAST)
- CSS extraction using
mini-css-extract-plugin - HTML generation using
html-webpack-plugin - Example of:
- Prefetched chunk, if you want to load faster critical parts of your build
- Asynchronously loaded chunks, to block page rendering when loading/parsing/executing
- Named chunks if you dont want your chunks to look like
2aae6c35c94fcfb415dbe95f408b9ce91ee846ed.js
- autoprefixer - Adding vendor prefixes, just in case. See package.json for
browserslistconfig - postcss-import - Support for @imports - just like in SASS
- Official TailwindCSS forms plugin loaded
- How to extend default color palette
- How to set a different font as first in font family declaration
xxlbreakpoint for responsive purposes
- Before every build, build directory is deleted to avoid deploying old assets
- Tailwind.run - sandbox for quickly mocking/debugging components in isolation
- TailwindCSS Cheat Sheet - with search. Hopefully will be updated to the latest TailwindCSS version soon
- VSCode IntelliSense - Custom config aware autocomplete for TailwindCSS
- Webpack dynamic imports - How and why do the dynamic imports. See
js/app.jsfor example.
- Investigate
webpack-dev-servernpm audit issues - Create github pages preview
- Write simple codeceptjs test run on the example, after the deployment