webpack-tailwindcss
This template is made to help start your project based on Webpack + TailwindCSS. JS is built and minified by ESBuild to keep it fast no matter what you do.
Build preview is available at: https://pavelloz.github.io/webpack-tailwindcss/
Usage
- To use this template, click "Use this template" green button in the top right.
- Clone the repository to your computer
- Install dependencies -
pnpm i
- Configure where your views are in tailwind.config.js.
npm/pnpm tasks
pnpm start
- runs dev server onhttp://localhost:8888
and reloads the browser on changespnpm build
- build assets in production mode, ready to deploy
Webpack setup includes
- JS and CSS transpilation and minification done by ESBuild (FAST)
- CSS extraction using
mini-css-extract-plugin
- HTML generation using
html-webpack-plugin
- Examples:
- 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
PostCSS setup includes
- autoprefixer - Adding vendor prefixes, just in case. See package.json for
browserslist
config - postcss-import - Support for @imports - just like in SASS
TailwindCSS setup includes
- Official TailwindCSS forms plugin loaded
- Examples:
- Extending default color palette
- Setting custom font as first in font family declaration
- Custom (
xxl
) breakpoint for responsive purposes - Custom variant for border width property
Notes
- Before every build, build directory (
dist
) is deleted to avoid deploying old assets
Additional resources
- 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.js
for example.
Github Actions
TODO
E2E tests
TODO
Happy coding!
TODO
- Migrate to pnpm
- Add node_modules caching in GHA to speed up builds
- Write simple cypress test run on the example, after the deployment
- Split webpack configs into common + dev/prod to avoid pushing to plugins array